Interface for a class ImageEditor
Triggers before an image is saved.
EmitType<Event>
Triggers once the component rendering is completed.
Triggers while cropping an image.
EmitType<Event>
Triggers once the component is destroyed with its elements and bound events.
Triggers once an image is opened.
Triggers when applying fine tune to an image.
Triggers while flipping an image.
EmitType<ImageFilterEventArgs>
Triggers when applying filter to an image.
Triggers while panning an image.
Triggers while rotating an image.
Triggers once an image is saved.
EmitType<ShapeChangeEventArgs>
Triggers while changing shapes in an image.
Triggers once the toolbar is created.
EmitType<ClickEventArgs>
Triggers once the toolbar item is clicked.
Triggers while updating/refreshing the toolbar
Triggers while zooming an image.
string
Defines class/multiple classes separated by a space for customizing Image Editor UI.
boolean
Specifies whether the Image Editor is disabled.
It can be done using the filter property of the canvas. The following fine tunes can be supported. Brightness: The intensity of the primary colors grows with increased brightness, but the color itself does not change. It can be done by changing brightness and opacity property. Contrast: The contrast of an image refers to the difference between the light pixels and dark pixels. Low contrast images contain either a narrow range of colors while high contrast images have bright highlights and dark shadows. It can be done by changing contrast property. Hue: Hue distinguishes one color from another and is described using common color names such as green, blue, red, yellow, etc. Value refers to the lightness or darkness of a color. It can be controlled by hue-rotate property. Saturation: If saturation increases, colors appear sharper or purer. As saturation decreases, colors appear more washed-out or faded. It can be controlled by saturation and brightness property. Exposure: If exposure increases, intensity of light appears brighter. As exposure decreases, intensity of light decreases. Exposure can be controlled by brightness property. Opacity: The state or quality of being opaque or transparent, not allowing light to pass through the image. Opacity can be controlled by opacity property. Blur : Adjusting the blur can make an image unfocused or unclear. Blur can be controlled by blur property.
string
Specifies the height of the Image Editor.
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
string | Theme
Specifies the theme of the Image Editor. The shape selection appearance will be decided based on this property. The property supports all the built-in themes of Syncfusion. default ‘Bootstrap5’
[]
Specifies the toolbar items to perform UI interactions. It accepts both string[] and ItemModel[] to configure its toolbar items. If the property is defined as empty collection, the toolbar will not be rendered. Suppose the property is not defined in control, an image editor’s toolbar will be rendered with preconfigured toolbar commands. The preconfigured toolbar commands are Crop: helps to crop an image as ellipse, square, various ratio aspects, custom selection with resize, drag and drop. Annotate: help to insert a shape on image that supports rectangle, ellipse, line, arrow, text and freehand drawing with resize, drag and drop, and customize its appearance. Transform: helps to rotate and flip an image. ZoomIn: performs zoom-in an image. ZoomOut: performs zoom-out an image. Pan: performs panning once zoomed an image. Move: disable the pan action and move to perform other actions such as insert a shape, transform, and more. Save: save the modified image. Open: open an image to perform editing. Reset: reset the modification and restore the original image.
string
Specifies template to the Image Editor Toolbar. If you want to customize the entire toolbar in own way by using this property. The property is depending on ‘toolbar’.
string
Specifies the width of the Image Editor.