Blazor Svg Editor

Blazor Svg Editor is a simple SVG editor for Blazor that allows annotations (in the form of SVG elements) to be placed on images. You are able to scale and translate the image (of course with the annotations) and manipulate it with css filters. Actually it supports circles, rectangles and polygons - but because of the abstract interface they can be easily extended. The shapes are movable and resizable. It is also checked that the shapes are not placed outside the image.

Demo

A demo application is hosted by GitHub-Pages. You can visit it here.

Documentation

Avaiable Properties

CssClass/CssStyle: Own classes and Styles for the component
MinScale/MaxScale
ImageManipulations: A class with properties for brightness, contrast, saturation and hue - they get applied on the loaded image
ImageSize: Set image height and width
ImageSource: There are two ways:
- Directly: (via Propertie ImageSource)
- ImageSourceLoadingFunc: A async func which loads the image source string (e.g. when you get a base64 string from an api)
OnShapeChanged: Event when Shapes get changed (with information about the ChangeType and the affected shape
bind-SelectedShapeId: The id from the selected shape (can also be set from outside)

Sample Code for Implementation

Here is a sample code for the implementation.

<SvgEditor @ref="svgEditor" CssClass="class" MinScale="0.8" ImageSize="(1000,750)" ImageManipulations="ImageManipulations" OnShapeChanged="EditorShapeChanged" ImageSourceLoadingFunc="GetImageSource" @bind-SelectedShapeId="SelectedShapeId">

The used ImageLoadFunc look as follows:

private async Task<string> GetImageSource()  
{  
    await Task.Delay(1000);  //An async api call is also possible...
    return "https://url-to-image.de"; 
}

For the other methods please take a look at the example project in the Repository.

Questions, Ideas, Feedback?