Class SfImageEditor

The Image Editor component is a graphical user interface used for editing images. It provides built-in support for rotate, flip, zoom, and crop the images based on the selection. It also has support for inserting an Annotations including rectangle, ellipse, line, text, path, arrow, image, and freehand drawings.

Inheritance
System.Object
SfBaseComponent
SfImageEditor
Inherited Members
Namespace: Syncfusion.Blazor.ImageEditor
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfImageEditor : SfBaseComponent
Examples

In the below code example, a basic Image Editor initialized with SfImageEditor tag directive.

 
<SfImageEditor></SfImageEditor>

In the below code example, a basic Image Editor initialized with SfImageEditor tag directive.

 
<SfImageEditor></SfImageEditor>

Constructors

SfImageEditor()

Declaration
public SfImageEditor()

Properties

AllowUndoRedo

Gets or sets a value indicating whether the undo and redo functionality is enabled in the SfImageEditor.

Declaration
public bool AllowUndoRedo { get; set; }
Property Value
Type Description
System.Boolean

true if the undo and redo functionality is enabled; otherwise, false. The default value is true.
Remarks

The undo-redo history is limited to 16 actions. After the 16th action, the first action in history is removed.

ChildContent

Gets or sets the child content for the SfImageEditor.

Declaration
public RenderFragment ChildContent { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment

This property represents the child content that will be placed inside the SfImageEditor component.
Remarks

The child content allows you to include custom elements or components within the SfImageEditor. You can define your own HTML, Razor components, or other content to be rendered inside the SfImageEditor.

CssClass

Gets or sets a value that indicates the CSS class string to customize the appearance of the SfImageEditor.

Declaration
public string CssClass { get; set; }
Property Value
Type Description
System.String

The CSS class string to customize the appearance of the control. The default value is an empty string.
Remarks

You can use this property to apply custom CSS classes to the SfImageEditor component. This allows you to style the component according to your specific design requirements. The CSS class string should contain one or more class names separated by spaces.

Enabled

Gets or sets a value indicating whether the SfImageEditor is enabled to interact.

Declaration
public bool Enabled { get; set; }
Property Value
Type Description
System.Boolean

true if the control is enabled; otherwise, false. The default value is true.
Remarks

When the control is enabled, users can interact with the SfImageEditor component. If set to false, user interactions will be disabled, and the component will be in a read-only state.

Height

Gets or sets the value that indicates the height of the SfImageEditor.

Declaration
public string Height { get; set; }
Property Value
Type Description
System.String

A string value that can accept all types of values such as a number (e.g., 950), pixel (e.g., 950px), em (950em), or a percentage (e.g., 100%) to specify the height of the image editor. The default value is 100%.
Remarks

If the value is specified as a percentage, then the height is relative to the height of the parent element. You can use various units to specify the height based on your design requirements.

HtmlAttributes

Gets or sets a collection of additional attributes that will be applied to the SfImageEditor component.

Declaration
public Dictionary<string, object> HtmlAttributes { get; set; }
Property Value
Type Description
System.Collections.Generic.Dictionary<System.String, System.Object>

This property allows you to specify additional attributes for customizing the rendering of the SfImageEditor component. The default value is null.
Remarks

Additional attributes can be added as inline attributes or by specifying @attributes directive.

Examples

In the below code example, signature height and width have been specified as style attributes in SfImageEditor.

<SfImageEditor style="height: 100%; width: 100%;"></SfImageEditor>

IsReadOnly

Gets or sets a value indicating whether the SfImageEditor component is in read-only mode.

Declaration
public bool IsReadOnly { get; set; }
Property Value
Type Description
System.Boolean

true if the read-only mode is enabled; otherwise, false. The default value is false.
Remarks

When the read-only mode is enabled, users won't be able to make changes to the content within the SfImageEditor. This is useful when you want to provide a view-only experience without allowing user modifications.

ShowQuickAccessToolbar

Gets or sets a value indicating whether the quick-access toolbar functionality is enabled in the SfImageEditor.

Declaration
public bool ShowQuickAccessToolbar { get; set; }
Property Value
Type Description
System.Boolean

true if the quick access toolbar is enabled; otherwise, false. The default value is true.
Remarks

The quick-access toolbar is shown when annotations are selected. It provides options for clone, delete, and edit text.

Theme

Gets or sets the value that indicates the theme to define the selection UI of the SfImageEditor.

Declaration
public Theme Theme { get; set; }
Property Value
Type Description
Theme

The possible values are: Bootstrap5, Bootstrap5Dark, Tailwind, TailwindDark, Fluent, FluentDark, Bootstrap4, Bootstrap, BootstrapDark, Material, MaterialDark, Fabric, FabricDark, HighContrast, Material3, and Material3Dark.
Remarks

You can set this property to one of the listed values to define the visual theme for the selection UI of the SfImageEditor. Each theme provides a unique look and feel to match your application's style. Choose a theme that best fits your application's design and user experience.

Toolbar

Gets or sets the value that indicates the items to define the toolbar of the SfImageEditor.

Declaration
public List<ImageEditorToolbarItemModel> Toolbar { get; set; }
Property Value
Type Description
System.Collections.Generic.List<ImageEditorToolbarItemModel>

A list of ImageEditorToolbarItemModel that specifies the built-in toolbar items or custom toolbar items. The list of built-in toolbar items includes Crop, Annotation, Transform, Zoom, UndoRedo, Reset, and Save.
Remarks

To hide the toolbar, specify an empty list. To limit the built-in toolbar items, provide a list with their names. { new ImageEditorToolbarItemModel() { Name = "Crop"}, new ImageEditorToolbarItemModel () {Name = "Annotation"} } If the given name matches the built-in toolbar items text, then the built-in toolbar items were rendered. To add a custom toolbar item alongside existing items, you can do: { new ImageEditorToolbarItemModel() { Name ="Crop"}, new ImageEditorToolbarItemModel() { Name ="Annotation" }, new ImageEditorToolbarItemModel() { Name = "Disabled", TooltipText = "Disabled", PrefixIcon = "e-disable"} } To provide a completely custom toolbar, use the ToolbarTemplate property instead.

Width

Gets or sets the value that indicates the width of the SfImageEditor.

Declaration
public string Width { get; set; }
Property Value
Type Description
System.String

A string value that can accept various types of input such as numbers (e.g., 950), pixels (e.g., 950px), em units (950em), or percentages (e.g., 100%) to specify the width of the image editor. The default value is 100%.
Remarks

When specifying the width as a percentage, it is relative to the width of the parent element. You can use different units to set the width according to your layout requirements.

Methods

ApplyAsync()

Applies the operations performed in the SfImageEditor, such as annotation drawings.

Declaration
public Task ApplyAsync()
Returns
Type Description
System.Threading.Tasks.Task

A Task that represents the asynchronous operation of applying changes to the image. The task completes when the component has finished the action.
Remarks

This method applies the changes after enabling annotation drawings. It ensures that the drawn annotations are applied to the image.

ApplyImageFilterAsync(ImageFilterOption)

Applies a filter to the image based on the provided parameter in the SfImageEditor.

Declaration
public Task ApplyImageFilterAsync(ImageFilterOption imageFilterOption)
Parameters
Type Name Description
ImageFilterOption imageFilterOption

Specifies the type of filter to be applied to the image. This is an Enum property specified as ImageFilterOption.
Returns
Type Description
System.Threading.Tasks.Task

A Task that completes when the component has finished the action.

BringForwardAsync(String)

Moves a shape to ahead of one shape based on the given shape ID in the SfImageEditor.

Declaration
public Task BringForwardAsync(string shapeId)
Parameters
Type Name Description
System.String shapeId

Specify the ID of the shape to be moved.
Returns
Type Description
System.Threading.Tasks.Task

A task that completes when the component has finished the move action.
Remarks

The ID can be obtained from the public method 'GetShapesAsync'.

BringToFrontAsync(String)

Moves a shape to ahead of all the shapes based on the given shape ID in the SfImageEditor.

Declaration
public Task BringToFrontAsync(string shapeId)
Parameters
Type Name Description
System.String shapeId

Specify the ID of the shape to be moved.
Returns
Type Description
System.Threading.Tasks.Task

A task that completes when the component has finished the move action.
Remarks

The ID can be obtained from the public method 'GetShapesAsync'.

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

CanRedoAsync()

Specifies if it's possible to redo the last recent action made in the SfImageEditor.

Declaration
public Task<bool> CanRedoAsync()
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

A Task that returns bool when it has finished.

CanUndoAsync()

Specifies if it's possible to undo the last recent action made in the SfImageEditor.

Declaration
public Task<bool> CanUndoAsync()
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

A Task that returns bool when it has finished.

ClearImageAsync()

Clears the loaded image in the SfImageEditor.

Declaration
public Task ClearImageAsync()
Returns
Type Description
System.Threading.Tasks.Task

A Task representing the asynchronous operation of clearing the image. It completes when the component has finished the action.
Remarks

This method clears the loaded image and updated the component user interface to its initial state (The initial user interface without loading image).

ClearSelectionAsync(Boolean)

Clears the current selection in the SfImageEditor.

Declaration
public Task ClearSelectionAsync(bool resetCrop = false)
Parameters
Type Name Description
System.Boolean resetCrop

Specifies to reset last cropped image in the SfImageEditor.
Returns
Type Description
System.Threading.Tasks.Task

A Task representing the asynchronous operation of clearing the selection.
Remarks

If no selection is currently active, this method has no effect. This method clears the current selection asynchronously and completes when the component has finished the action.

CloneShapeAsync(String)

Duplicates a shape based on the given shape ID in the SfImageEditor.

Declaration
public Task<bool> CloneShapeAsync(string shapeId)
Parameters
Type Name Description
System.String shapeId

Specify the ID of the shape to be cloned.
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

A task that completes when the component has finished the clone action.
Remarks

The ID can be obtained from the public method 'GetShapesAsync'.

CropAsync()

Crops the image based on the selection in the SfImageEditor.

Declaration
public Task<bool> CropAsync()
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

A Task representing the asynchronous operation of cropping the selection. It completes when the component has finished the action.
Remarks

This method crops the selected area of the original image, and the original image will be replaced by the cropped version. If no selection is currently active, this method has no effect.

DeleteRedactAsync(String)

Selects a redact based on the provided redact ID in the SfImageEditor.

Declaration
public Task DeleteRedactAsync(string id)
Parameters
Type Name Description
System.String id

Specifies the ID of the redact to be selected.
Returns
Type Description
System.Threading.Tasks.Task

A task that completes when the component has finished the action.
Remarks

The ID can be obtained using the public method GetRedactsAsync().

DeleteShapeAsync(String)

Selects a shape based on the provided shape ID in the SfImageEditor.

Declaration
public Task DeleteShapeAsync(string shapeId)
Parameters
Type Name Description
System.String shapeId

Specifies the ID of the shape to be selected.
Returns
Type Description
System.Threading.Tasks.Task

A task that completes when the component has finished the action.
Remarks

The ID can be obtained using the public method GetShapesAsync().

DisableActiveAnnotationAsync()

Deactivates the current annotation state, ending shape drawing in the Image Editor.

Declaration
public Task DisableActiveAnnotationAsync()
Returns
Type Description
System.Threading.Tasks.Task

void
Remarks

This method deactivates the shape drawing option in the Image Editor.
When disabled, users will not be able to draw shapes until the drawing option is re-enabled.

DisableFreehandDrawAsync()

Disables the freehand draw option to stop freehand drawings on the canvas using mouse or touch actions in the SfImageEditor.

Declaration
public Task DisableFreehandDrawAsync()
Returns
Type Description
System.Threading.Tasks.Task

A task that completes when the component has finished the action.
Remarks

This method returns false if it is called when freehand draw is already disabled.

DiscardAsync()

Discards the operations performed in the SfImageEditor, such as annotation drawings.

Declaration
public Task DiscardAsync()
Returns
Type Description
System.Threading.Tasks.Task

A Task that represents the asynchronous operation of discarding changes made to the image. The task completes when the component has finished the action.
Remarks

This method discards the actions performed after enabling annotation drawings, ensuring that the drawn annotations are not applied to the image.

DrawArrowAsync(Double, Double, Double, Double, Double, String, ImageEditorArrowHeadType, ImageEditorArrowHeadType, Boolean)

Draws an arrow on the image in the SfImageEditor.

Declaration
public Task<bool> DrawArrowAsync(double startX = -1, double startY = -1, double endX = -1, double endY = -1, double strokeWidth = -1, string strokeColor = "", ImageEditorArrowHeadType arrowStart, ImageEditorArrowHeadType arrowEnd, bool isSelected = false)
Parameters
Type Name Description
System.Double startX

Optional. Specifies the start X-coordinate to draw the arrow. Defaults to the center point of the image if not specified.
System.Double startY

Optional. Specifies the start Y-coordinate to draw the arrow. Defaults to the center point of the image if not specified.
System.Double endX

Optional. Specifies the end X-coordinate to draw the arrow. Defaults to startX plus 100 if not specified.
System.Double endY

Optional. Specifies the end Y-coordinate to draw the arrow. Defaults to startY plus 100 if not specified.
System.Double strokeWidth

Optional. Specifies the stroke width to draw the arrow. Defaults to extra-small if not specified.
System.String strokeColor

Optional. Specifies the stroke color to draw the arrow. Defaults to white if not specified.
ImageEditorArrowHeadType arrowStart

Optional. Specifies the type of arrowhead for the start position. Defaults to None if not specified.
ImageEditorArrowHeadType arrowEnd

Optional. Specifies the type of arrowhead for the end position. Defaults to SolidArrow if not specified.
System.Boolean isSelected

Optional. Specifies to show the shape in the selected state.
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

A task that completes when the component has finished the action.
Remarks

If the given X and Y coordinates are not within the image range, the arrow is not drawn on the image.

DrawEllipseAsync(Double, Double, Double, Double, Double, String, String, Double, Boolean)

Draws an ellipse on the image in the SfImageEditor.

Declaration
public Task<bool> DrawEllipseAsync(double x = -1, double y = -1, double radiusX = -1, double radiusY = -1, double strokeWidth = -1, string strokeColor = "", string fillColor = "", double degree = -1, bool isSelected = false)
Parameters
Type Name Description
System.Double x

Optional. Specifies the X-coordinate to draw the ellipse. Defaults to the center position of the image if not specified.
System.Double y

Optional. Specifies the Y-coordinate to draw the ellipse. Defaults to the center position of the image if not specified.
System.Double radiusX

Optional. Specifies the radius of the X-coordinates to draw the ellipse. Defaults to 50 if not specified.
System.Double radiusY

Optional. Specifies the radius of the Y-coordinates to draw the ellipse. Defaults to 50 if not specified.
System.Double strokeWidth

Optional. Specifies the stroke width to draw the ellipse.
System.String strokeColor

Optional. Specifies the stroke color to draw the ellipse. Defaults to white if not specified.
System.String fillColor

Optional. Specifies the color to fill the ellipse. Defaults to transparent if not specified.
System.Double degree

Optional. Specifies the degree to rotate the rectangle.
System.Boolean isSelected

Optional. Specifies to show the shape in the selected state.
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

A task that completes when the component has finished the action.
Remarks

If the given X and Y coordinates are not within the image range, the ellipse is not drawn on the image.

DrawFrameAsync(FrameType, String, String, Int32, Int32, Int32, Int32, FrameLineStyle, Int32)

Draws a customizable frame on the image within the SfImageEditor.

Declaration
public Task<bool> DrawFrameAsync(FrameType frameType, string color = "#fff", string gradientColor = "", int size = 20, int inset = -1, int offset = -1, int borderRadius = -1, FrameLineStyle frameLineStyle, int lineCount = -1)
Parameters
Type Name Description
FrameType frameType

Specifies the type of frame to be drawn on the image.
System.String color

Optional. Specify the color of the frame. Defaults to white ("#fff") if not specified.
System.String gradientColor

Optional. Specify the gradient color of the frame. Defaults to empty if not specified.
System.Int32 size

Optional. Specify the size of the frame as a percentage. It can be provided as an integer percentage (e.g., 10). Defaults to 20 if not specified.
System.Int32 inset

Optional. Specify the inset value for line, hook, and inset type frames, as a percentage. It can be provided as an integer percentage (e.g., 10). Defaults to 0 if not specified.
System.Int32 offset

Optional. Specify the offset value for line and inset type frames, as a percentage. It can be provided as an integer percentage (e.g., 10). Defaults to 0 if not specified.
System.Int32 borderRadius

Optional. Specify the border radius for line-type frames, as a percentage. It can be provided as an integer percentage (e.g., 10). Defaults to 0 if not specified.
FrameLineStyle frameLineStyle

Optional. Specify the type of line to be drawn for line-type frames. Default to Solid if not specified.
System.Int32 lineCount

Optional. Specify the number of lines for line-type frames. Defaults to 0 if not specified.
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

A task representing the asynchronous operation that completes when the frame is drawn.
Remarks

This method allows you to add various types of frames to the image using the provided parameters. Depending on the chosen frame type, different customization options are available. Use this method within the context of an SfImageEditor instance.

DrawImageAsync(String, Double, Double, Int32, Int32, Boolean, Double, Double, Boolean)

Draws an image annotation on the image in the SfImageEditor.

Declaration
public Task<bool> DrawImageAsync(string data, double x = -1, double y = -1, int width = -1, int height = -1, bool isAspectRatio = true, double degree = -1, double opacity = -1, bool isSelected = false)
Parameters
Type Name Description
System.String data

Specifies the URL or image data of the image to be annotated.
System.Double x

Optional. Specifies the x-coordinate of the starting point for the image annotation. Default to center point of the image, if it is not specified.
System.Double y

Optional. Specifies the y-coordinate of the starting point for the image annotation. Default to center point of the image, if it is not specified.
System.Int32 width

Optional. Specifies the width of the image annotation. Default size is calculated based on the aspect ratio of the image, if it is not specified.
System.Int32 height

Optional. Specifies the height of the image annotation. Default size is calculated based on the aspect ratio of the image, if it is not specified.
System.Boolean isAspectRatio

Optional. If set to true, maintains the image's aspect ratio based on the width value during resizing. Default to true, if it is not specified
System.Double degree

Optional. Specifies the degree for the image annotation. Default to 0 degree of the image, if it is not specified.
System.Double opacity

Optional. Specifies the opacity value for the image. Default to 0 degree of the image, if it is not specified.
System.Boolean isSelected

Optional. Specifies to show the shape in the selected state.
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

True if the image annotation was successfully drawn; otherwise, false.

DrawLineAsync(Double, Double, Double, Double, Double, String, Boolean)

Draws a line on the image in the SfImageEditor.

Declaration
public Task<bool> DrawLineAsync(double startX = -1, double startY = -1, double endX = -1, double endY = -1, double strokeWidth = -1, string strokeColor = "", bool isSelected = false)
Parameters
Type Name Description
System.Double startX

Optional. Specifies the start X-coordinate to draw the line. Defaults to the center point of the image if not specified.
System.Double startY

Optional. Specifies the start Y-coordinate to draw the line. Defaults to the center point of the image if not specified.
System.Double endX

Optional. Specifies the end X-coordinate to draw the line. Defaults to startX plus 100 if not specified.
System.Double endY

Optional. Specifies the end Y-coordinate to draw the line. Defaults to startY plus 100 if not specified.
System.Double strokeWidth

Optional. Specifies the stroke width to draw the line. Defaults to extra-small if not specified.
System.String strokeColor

Optional. Specifies the stroke color to draw the line. Defaults to white if not specified.
System.Boolean isSelected

Optional. Specifies to show the shape in the selected state.
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

A task that completes when the component has finished the action.
Remarks

If the given X and Y coordinates are not within the image range, the line is not drawn on the image.

DrawPathAsync(ImageEditorPoint[], Double, String, Boolean)

Draws a path on the image in the SfImageEditor.

Declaration
public Task<bool> DrawPathAsync(ImageEditorPoint[] points, double strokeWidth = -1, string strokeColor = "", bool isSelected = false)
Parameters
Type Name Description
ImageEditorPoint[] points

Optional. Specifies a collection of X and Y coordinates as ImageEditorPoint to draw a path. Defaults to drawing a single path from the center point of the image if not specified.
System.Double strokeWidth

Optional. Specifies the stroke width to draw the path. Defaults to extra-small if not specified.
System.String strokeColor

Optional. Specifies the stroke color to draw the path. Defaults to white if not specified.
System.Boolean isSelected

Optional. Specifies to show the shape in the selected state.
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

A task that completes when the component has finished the action.
Remarks

If the given X and Y coordinates are not within the image range, the path is not drawn on the image.

DrawRectangleAsync(Double, Double, Int32, Int32, Int32, String, String, Double, Boolean, Double)

Draws a rectangle on the image in the SfImageEditor.

Declaration
public Task<bool> DrawRectangleAsync(double x = -1, double y = -1, int width = -1, int height = -1, int strokeWidth = -1, string strokeColor = "", string fillColor = "", double degree = -1, bool isSelected = false, double borderRadius = -1)
Parameters
Type Name Description
System.Double x

Optional. Specifies the X-coordinate to draw the rectangle. Defaults to the center point of the image if not specified.
System.Double y

Optional. Specifies the Y-coordinate to draw the rectangle. Defaults to the center point of the image if not specified.
System.Int32 width

Optional. Specifies the width to draw the rectangle from the start point. Defaults to 100 if not specified.
System.Int32 height

Optional. Specifies the height to draw the rectangle from the start point. Defaults to 50 if not specified.
System.Int32 strokeWidth

Optional. Specifies the stroke width to draw the rectangle. Defaults to extra-small size if not specified.
System.String strokeColor

Optional. Specifies the stroke color to draw the rectangle. Defaults to white color if not specified.
System.String fillColor

Optional. Specifies the color to fill the rectangle. Defaults to transparent if not specified.
System.Double degree

Optional. Specifies the degree to rotate the rectangle.
System.Boolean isSelected

Optional. Specifies to show the shape in the selected state.
System.Double borderRadius

Optional. Specifies the border radius value to apply border radius to the rectangle.
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

A task that completes when the component has finished the action.
Remarks

If the given X and Y coordinates are not within the image range, the rectangle is not drawn on the image.

DrawRedactAsync(RedactType, Double, Double, Double, Double, Int32)

Draws a redact on the image in the SfImageEditor.

Declaration
public Task<bool> DrawRedactAsync(RedactType redactType, double startX = -1, double startY = -1, double width = -1, double height = -1, int value = -1)
Parameters
Type Name Description
RedactType redactType

Optional. Specifies the type of redaction to be drawn on the image. If not specified, the redaction drawing is initiated with the default blur value.
System.Double startX

Optional. Specifies the X-coordinate to draw the redact. Defaults to the center point of the image if not specified.
System.Double startY

Optional. Specifies the Y-coordinate to draw the redact. Defaults to the center point of the image if not specified.
System.Double width

Optional. Specifies the width to draw the redact from the start point. Defaults to 100 if not specified.
System.Double height

Optional. Specifies the height to draw the redact from the start point. Defaults to 50 if not specified.
System.Int32 value

Optional. Specifies the blur value of the blur type redaction or pixel size of the pixelate redaction. Defaults to 20 since the default redaction is blur if not specified.
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

A task that completes when the component has finished the action.
Remarks

If the given X and Y coordinates are not within the image range, the redact is not drawn on the image.

DrawTextAsync(Double, Double, String, String, Int32, Boolean, Boolean, String, Boolean, Int32, String, String, Int32)

Draws a text on the image in the SfImageEditor.

Declaration
public Task<bool> DrawTextAsync(double x = -1, double y = -1, string text = "", string fontFamily = "", int fontSize = -1, bool bold = false, bool italic = false, string color = "", bool isSelected = false, int degree = -1, string fillColor = "", string strokeColor = "", int strokeWidth = -1)
Parameters
Type Name Description
System.Double x

Optional. Specifies the X-coordinate to draw the text. Defaults to the center point of the image if not specified.
System.Double y

Optional. Specifies the Y-coordinate to draw the text. Defaults to the center point of the image if not specified.
System.String text

Optional. Specifies the text to be drawn. Defaults to "Enter Text" if not specified.
System.String fontFamily

Optional. Specifies the font family for the text to be drawn on the image. Defaults to "Arial" if not specified.
System.Int32 fontSize

Optional. Specifies the font size for the text to be drawn on the image. Defaults to extra-small size if not specified.
System.Boolean bold

Optional. Specifies the bold style for the text to be drawn. Defaults to false if not specified.
System.Boolean italic

Optional. Specifies the italic style for the text to be drawn. Defaults to false if not specified.
System.String color

Optional. Specifies the text color.
System.Boolean isSelected

Optional. Specifies to show the shape in the selected state.
System.Int32 degree

Optional. Specifies the degree to rotate the shape.
System.String fillColor

Optional. Specifies the background Color of the text.
System.String strokeColor

Optional. Specifies the outline Color of the text.
System.Int32 strokeWidth

Optional. Specifies the outline color width of the text.
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

A task that completes when the component has finished the action.
Remarks

If the given X and Y coordinates are not within the image range, the text is not drawn on the image.

EnableActiveAnnotationAsync(ShapeType)

Activates the specified annotation type for drawing in the Image Editor.

Declaration
public Task EnableActiveAnnotationAsync(ShapeType shapeType)
Parameters
Type Name Description
ShapeType shapeType

Specifies the type of shape to be enabled for drawing.
Returns
Type Description
System.Threading.Tasks.Task

void
Remarks

This method allows users to draw shapes on the image in the Image Editor.
Once a shape type is enabled, users can continue drawing that shape until the drawing option is disabled.

EnableFreehandDrawAsync()

Enables the freehand draw option to draw freehand drawings on the canvas using mouse or touch actions in the SfImageEditor.

Declaration
public Task EnableFreehandDrawAsync()
Returns
Type Description
System.Threading.Tasks.Task

A task that completes when the component has finished the action.
Remarks

This method returns false if it is called when freehand draw is already enabled.

EnableTextEditingAsync()

Enable text area editing in the SfImageEditor.

Declaration
public Task EnableTextEditingAsync()
Returns
Type
System.Threading.Tasks.Task

ExportAsync(String, ImageEditorFileType, Double)

Exports the image from the SfImageEditor based on the provided file type and file name.

Declaration
public Task ExportAsync(string fileName = "", ImageEditorFileType fileType, double imageQuality = 1)
Parameters
Type Name Description
System.String fileName

Optional. Specifies the name of the image file to export. Defaults to the original image name if not specified.
ImageEditorFileType fileType

Optional. Specifies the type of image file to export. This is an Enum property of type ImageEditorFileType. Defaults to "PNG" if not specified.
System.Double imageQuality

Optional. Specifies the quality of the image file to export. This is only applicable for JPEG type images. This is a double type. Defaults to 1.0, which represents the original size of the image if not specified.
Returns
Type Description
System.Threading.Tasks.Task

A Task that completes when the export action has finished.
Remarks

The "fileName" parameter should be null if the user wants to change only the type of image.

FinetuneImageAsync(ImageFinetuneOption, Int32)

Applies color correction or adjustment to an image based on the provided parameters in the SfImageEditor.

Declaration
public Task FinetuneImageAsync(ImageFinetuneOption finetuneOption, int value)
Parameters
Type Name Description
ImageFinetuneOption finetuneOption

Specifies the type of finetune to be performed on the image. This is an Enum property specified as ImageFinetuneOption.
System.Int32 value

Specifies the value to be applied for finetuning the image.
Returns
Type Description
System.Threading.Tasks.Task

A Task that completes when the component has finished the action.
Remarks

If the given value exceeds the range specified in the Syncfusion.Blazor.ImageEditor.SfImageEditor.FinetuneSettings, the finetuning will not be performed.

FlipAsync(ImageEditorDirection)

Flips the image in the specified direction in the SfImageEditor.

Declaration
public Task FlipAsync(ImageEditorDirection direction)
Parameters
Type Name Description
ImageEditorDirection direction

Specifies the direction to flip the image. This is an Enum property of type ImageEditorDirection.
Returns
Type Description
System.Threading.Tasks.Task

A Task representing the asynchronous operation of flipping the image. It completes when the component has finished the action.
Remarks

The possible values for the ImageEditorDirection Enum are "Horizontal" and "Vertical".

GetImageDataAsync()

Gets the current image data from the SfImageEditor.

Declaration
public Task<byte[]> GetImageDataAsync()
Returns
Type Description
System.Threading.Tasks.Task<System.Byte[]>

A Task that completes when the component has finished the action.
Remarks

The value returned by this method is used to render the image in the HTML canvas as well as within our image editor using the OpenAsync(Object, Boolean, String) method.

GetImageDataUrlAsync(Boolean)

Gets the current image data URL from the SfImageEditor.

Declaration
public Task<string> GetImageDataUrlAsync(bool includeAnnotations = true)
Parameters
Type Name Description
System.Boolean includeAnnotations

Optional. Specifies whether the returned image data should include annotations. The default value is true, meaning annotations are included.
Returns
Type Description
System.Threading.Tasks.Task<System.String>

A Task that completes when the component has finished the action.
Remarks

The value returned by this method is used to save the edited image to the database as well as open it in our image editor using the OpenAsync(Object, Boolean, String) method.

GetImageDimensionAsync()

Gets the image dimension after cropping the image in the SfImageEditor.

Declaration
public Task<ImageDimension> GetImageDimensionAsync()
Returns
Type Description
System.Threading.Tasks.Task<ImageDimension>

A ImageDimension representing the current position and size of the image in the SfImageEditor.
Remarks

This method is useful for obtaining the dimensions and position of the cropped image within the SfImageEditor.

GetImageFilterAsync(ImageFilterOption)

Update filter to the canvas in the SfImageEditor.

Declaration
public Task<string> GetImageFilterAsync(ImageFilterOption type)
Parameters
Type Name Description
ImageFilterOption type

Specifies the filter options to the image.
Returns
Type
System.Threading.Tasks.Task<System.String>

GetRedactsAsync()

Gets all the redacts inserted into the SfImageEditor.

Declaration
public Task<RedactSettings[]> GetRedactsAsync()
Returns
Type Description
System.Threading.Tasks.Task<RedactSettings[]>

It returns the redact collection as RedactSettings. The available values in a redact setting include height, width, blur intensity and pixel size.
Remarks

This method returns all the redacts inserted in this SfImageEditor.

GetShapesAsync()

Gets all the shapes inserted into the SfImageEditor.

Declaration
public Task<ShapeSettings[]> GetShapesAsync()
Returns
Type Description
System.Threading.Tasks.Task<ShapeSettings[]>

It returns the shape collection as ShapeSettings. The available values in a shape setting include height, width, stroke color, fill color, stroke width, radius, text, font size, and font style.
Remarks

This method returns all the shapes inserted in this SfImageEditor.

ImageResizeAsync(Int32, Int32, Boolean)

Resize an image by adjusting its dimensions.

Declaration
public Task<bool> ImageResizeAsync(int width = -1, int height = -1, bool isAspectRatio = true)
Parameters
Type Name Description
System.Int32 width

The new width of the image.
System.Int32 height

The new height of the image.
System.Boolean isAspectRatio

Optional. If set to true, maintains the image's aspect ratio based on the width value during resizing. Default to true, if it is not specified
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

True if the resizing operation was successful; otherwise, false.

OnAfterRenderAsync(Boolean)

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
System.Boolean firstRender
Returns
Type
System.Threading.Tasks.Task
Overrides

OnInitializedAsync()

Triggered when the component is initialized.

Declaration
protected override Task OnInitializedAsync()
Returns
Type
System.Threading.Tasks.Task
Overrides

OnParametersSetAsync()

Triggered when the component is loaded.

Declaration
protected override Task OnParametersSetAsync()
Returns
Type
System.Threading.Tasks.Task

OpenAsync(Object, Boolean, String)

Opens an image in the SfImageEditor as a URL or image data.

Declaration
public Task OpenAsync(object data, bool resetChanges = true, string fillColor = "")
Parameters
Type Name Description
System.Object data

The URL of the image or image data url to open in the image editor.
System.Boolean resetChanges

Optional. Determines whether to reset existing changes when opening the image. The default value is true, which resets all existing changes.
System.String fillColor

Optional. Specifies the background color to apply when opening a transparent image. The default value is an empty string (''), meaning no background color is applied by default when a transparent image is opened.
Returns
Type Description
System.Threading.Tasks.Task

A Task that completes when the component has finished the action.
Remarks

This method can be useful when you want to open an image in the editor, especially if you have obtained the image data using the GetImageDataUrlAsync(Boolean) method.

RedoAsync()

Redoes the last user action that was undone by the user or the UndoAsync() method in the SfImageEditor.

Declaration
public Task RedoAsync()
Returns
Type Description
System.Threading.Tasks.Task

A Task that completes when the component has finished the redo action.
Remarks

This method can only be performed if the AllowUndoRedo property is set to true and there is a previous action that was undone.

RefreshAsync()

The method is used to re-render the image editor.

Declaration
public Task RefreshAsync()
Returns
Type
System.Threading.Tasks.Task

ResetAsync()

Resets any customizations that have been made to the image since it was loaded in the SfImageEditor, restoring it to its original state.

Declaration
public Task ResetAsync()
Returns
Type Description
System.Threading.Tasks.Task

A Task that completes when the component has finished the action.
Remarks

This method can be useful when a user has made multiple changes to the image and wishes to start over from the original version.

RotateAsync(Int32)

Rotates the image clockwise or counterclockwise based on the provided degree in the SfImageEditor.

Declaration
public Task<bool> RotateAsync(int degree)
Parameters
Type Name Description
System.Int32 degree

Specifies the degree to rotate the image.

  • If the degree is a positive value, the image is rotated clockwise.
  • If the degree is a negative value, the image is rotated counterclockwise.
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

A Task that completes when the rotation is finished.
Remarks

Valid degree values include 0, 90, 180, 270, 360, and their negative counterparts.

SelectAsync(String, Double, Double, Double, Double)

Selects a region of the image to perform cropping based on the provided type and region parameters in the SfImageEditor.

Declaration
public Task SelectAsync(string type, double startX = -1, double startY = -1, double width = -1, double height = -1)
Parameters
Type Name Description
System.String type

Optional. Specifies the type of selection to be cropped. The default value is "custom," and possible values are "rectangle," "ellipse," and "custom."
System.Double startX

Optional. Specifies the starting x-position to begin the selection. Defaults to the center of the image editor if not specified.
System.Double startY

Optional. Specifies the starting y-position to begin the selection. Defaults to the center of the SfImageEditor if not specified.
System.Double width

Optional. Specifies the width of the selection. Defaults to half of the image editor width if not specified.
System.Double height

Optional. Specifies the height of the selection. Defaults to half of the image editor height if not specified.
Returns
Type Description
System.Threading.Tasks.Task

A Task that completes when the component has finished the action.

SelectRedactAsync(String)

Selects a redact based on the provided redact ID in the SfImageEditor.

Declaration
public Task<bool> SelectRedactAsync(string id)
Parameters
Type Name Description
System.String id

Specifies the ID of the redact to be selected.
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

A task that completes when the component has finished the action.
Remarks

The ID can be obtained using the public method GetRedactsAsync().

SelectShapeAsync(String)

Selects a shape based on the provided shape ID in the SfImageEditor.

Declaration
public Task<bool> SelectShapeAsync(string shapeId)
Parameters
Type Name Description
System.String shapeId

Specifies the ID of the shape to be selected.
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

A task that completes when the component has finished the action.
Remarks

The ID can be obtained using the public method GetShapesAsync().

SendBackwardAsync(String)

Moves a shape to behind one shape based on the given shape ID in the SfImageEditor.

Declaration
public Task SendBackwardAsync(string shapeId)
Parameters
Type Name Description
System.String shapeId

Specify the ID of the shape to be moved.
Returns
Type Description
System.Threading.Tasks.Task

A task that completes when the component has finished the move action.
Remarks

The ID can be obtained from the public method 'GetShapesAsync'.

SendToBackAsync(String)

Moves a shape to behind all the other shapes based on the given shape ID in the SfImageEditor.

Declaration
public Task SendToBackAsync(string shapeId)
Parameters
Type Name Description
System.String shapeId

Specify the ID of the shape to be moved.
Returns
Type Description
System.Threading.Tasks.Task

A task that completes when the component has finished the move action.
Remarks

The ID can be obtained from the public method 'GetShapesAsync'.

StraightenImageAsync(Int32)

Straighten the image clockwise or counter clockwise based on the provided degree in the SfImageEditor.

Declaration
public Task<bool> StraightenImageAsync(int degree)
Parameters
Type Name Description
System.Int32 degree

Specifies the degree to straighten the image. The value must be between the range of -45 and +45.

  • If the degree is a positive value, the image is rotated clockwise.
  • If the degree is a negative value, the image is rotated counterclockwise.
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

True if the straighten was successfully drawn; otherwise, false.
Remarks

The degree value should be within the range of -45 to +45 degrees for accurate straightening.

UndoAsync()

Reverses the last action performed by the user in the SfImageEditor.

Declaration
public Task UndoAsync()
Returns
Type Description
System.Threading.Tasks.Task

A Task that completes when the component has finished the undo action.
Remarks

This method can only be performed if the AllowUndoRedo property is set to true and there is a previous action to undo.

UpdateRedactAsync(RedactSettings, Boolean)

This method is used to update the existing redacts by changing its height, width, blur intensity, and pixel size in the SfImageEditor component.

Declaration
public Task<bool> UpdateRedactAsync(RedactSettings setting, bool isSelected = false)
Parameters
Type Name Description
RedactSettings setting

Specify the new redact settings that will be changed the existing redact�s settings.
System.Boolean isSelected

Optional. Specifies to show the redact in the selected state.
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

A task that completes when the component has finished the action.
Remarks

The redact setting can be obtained from the public method 'GetRedactsAsync'. This method is used to change all the settings including height, width, blur intensity and pixel size to the existing redact based on the available redact id in the redact setting.

UpdateShapeAsync(ShapeSettings, Boolean)

This method is used to update the existing shapes by changing its height, width, color, and font styles in the SfImageEditor component.

Declaration
public Task<bool> UpdateShapeAsync(ShapeSettings settings, bool isSelected = false)
Parameters
Type Name Description
ShapeSettings settings

Specify the new shape settings that will be changed the existing shape�s settings.
System.Boolean isSelected

Optional. Specifies to show the shape in the selected state.
Returns
Type Description
System.Threading.Tasks.Task<System.Boolean>

A task that completes when the component has finished the action.
Remarks

The shape setting can be obtained from the public method 'GetShapesAsync'. This method is used to change all the settings including height, width, color, font related changes to the existing shape based on the available shape id in the shape setting.

ZoomAsync(Double, ImageEditorPoint)

Zooms the image in or out based on the specified value in the SfImageEditor.

Declaration
public Task ZoomAsync(double zoomFactor, ImageEditorPoint zoomPoint = null)
Parameters
Type Name Description
System.Double zoomFactor

Specifies the zoom factor to perform zooming. The minimum and maximum zoom factors are defined in the Syncfusion.Blazor.ImageEditor.SfImageEditor.ZoomSettings property.
ImageEditorPoint zoomPoint

Optional. Specifies the point at which the zoom in/out operation is performed in the image editor using ImageEditorPoint.
Returns
Type Description
System.Threading.Tasks.Task

A task that completes when the zoom operation has finished.
Remarks

If the given zoom factor value exceeds the range of the minimum and maximum zoom factors, the zooming operation cannot be performed.