Image Editor is a graphical user interface that helps to edit an image by performing actions like selection, cropping, rotating, inserting text and shapes (rectangles, ellipses, lines, arrows), and drawing free hand on top of an image.
<div id='imageeditor'></div>
<script>
var imageObj = new ImageEditor({});
imageObj.appendTo("#imageeditor");
</script>
string
Defines class/multiple classes separated by a space for customizing Image Editor UI.
Defaults to ”html<div id='imageeditor'></div>``````typescript<script>var imageObj = new ImageEditor({cssClass: 'e-custom-img-editor'});imageObj.appendTo("#imageeditor");</script>
boolean
Specifies whether the Image Editor is disabled.
Defaults to false
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.
Defaults to ‘100%’
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
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’
Defaults to Theme.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.
Defaults to nullhtml<div id='imageeditor'></div>``````typescript<script>var imageObj = new ImageEditor({ toolbar[Crop, ZoomIn, ZoomOut, Transform, {text: 'Custom'}]});imageObj.appendTo("#imageeditor");</script>
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’.
Defaults to nullhtml<div id='imageeditor'></div>``````typescript<script>var imageObj = new ImageEditor({ toolbarTemplate: '#toolbarTemplate'});imageObj.appendTo("#imageeditor");</script><script id="toolbarTemplate" type="text/x-template"> <div class = 'e-toolbar'> <button id= 'dltbtn'></button> </div> </script>
string
Specifies the width of the Image Editor.
Defaults to ‘100%’
Adds the handler to the given event listener.
Parameter | Type | Description |
---|---|---|
eventName | string |
A String that specifies the name of the event |
handler | Function |
Specifies the call to run when the event occurs. |
Returns void
Appends the control within the given HTML element
Parameter | Type | Description |
---|---|---|
selector (optional) | string | HTMLElement |
Target element where control needs to be appended |
Returns void
To apply the filters to an image
Parameter | Type | Description |
---|---|---|
filterOption | ImageFilterOptions |
Specifies the filter options to the image. |
Returns void
Clear a current selection.
Returns void
Crops an image based on the selection. The selection can be done through programmatically using the select method or through UI interactions.
Returns boolean
When invoked, applies the pending property changes immediately to the component.
Returns void
Deletes a shape based on the given shape id. The id can be got from the public method getShapeSettings.
Parameter | Type | Description |
---|---|---|
id | string |
Specifies the shape id to delete the shape on an image. |
Returns void
Draw ellipse on an image.
Parameter | Type | Description |
---|---|---|
x (optional) | number |
Specifies x-coordinate of ellipse. |
y (optional) | number |
Specifies y-coordinate of ellipse. |
radiusX (optional) | number |
the radius x point for the ellipse. |
radiusY (optional) | number |
the radius y point for the ellipse. |
strokeWidth (optional) | number |
the stroke width of ellipse. |
strokeColor (optional) | string |
the stroke color of ellipse. |
fillColor (optional) | string |
the fill color of the ellipse. |
Returns boolean
Draw line on an image.
Parameter | Type | Description |
---|---|---|
startX (optional) | number |
– Specifies start point x-coordinate of line. |
startY (optional) | number |
– Specifies start point y-coordinate of line. |
endX (optional) | number |
Specifies end point x-coordinates of line. |
endY (optional) | number |
Specifies end point y-coordinates of the line. |
strokeWidth (optional) | number |
Specifies the stroke width of line. |
strokeColor (optional) | string |
Specifies the stroke color of line. |
Returns boolean
Draw a rectangle on an image.
Parameter | Type | Description |
---|---|---|
x (optional) | number |
Specifies x-coordinate of rectangle. |
y (optional) | number |
Specifies y-coordinate of rectangle. |
width (optional) | number |
Specifies the width of the rectangle. |
height (optional) | number |
Specifies the height of the rectangle. |
strokeWidth (optional) | number |
Specifies the stroke width of rectangle. |
strokeColor (optional) | string |
Specifies the stroke color of rectangle. |
fillColor (optional) | string |
the fill color of the rectangle. |
Returns boolean
Draw a text on an image.
Parameter | Type | Description |
---|---|---|
x (optional) | number |
Specifies x-coordinate of text. |
y (optional) | number |
Specifies y-coordinate of text. |
text (optional) | string |
Specifies the text to add on an image. |
fontFamily (optional) | string |
Specifies the font family of the text. |
fontSize (optional) | number |
Specifies the font size of the text. |
bold (optional) | boolean |
Specifies whether the text is bold or not. |
italic (optional) | boolean |
Specifies whether the text is italic or not. |
color (optional) | string |
Specifies font color of the text. |
Returns boolean
Export an image using the specified file name and the extension.
Parameter | Type | Description |
---|---|---|
type (optional) | string |
Specifies a format of image to be saved. |
fileName (optional) | string |
– Specifies a file name to be saved |
Returns void
To apply the filters to an image
Parameter | Type | Description |
---|---|---|
finetuneOption | ImageFinetuneOptions |
Specifies the finetune options to the image. |
value | number |
Specifies the value for finetuning the image. |
Returns void
Flips an image by horizontally or vertically.
Parameter | Type | Description |
---|---|---|
direction | Direction |
Specifies the direction to flip the image. |
Returns void
Enable or disable a freehand drawing in an Image Editor.
Parameter | Type | Description |
---|---|---|
value | boolean |
Specifies a value whether enable or disable freehand drawing. @returns {void}. |
Returns void
Return an image as ImageData.
Returns ImageData
Returns the persistence data for component
Returns any
Returns the route element of the component
Returns HTMLElement
Get particular shapes details based on id of the shape which is drawn on an image editor.
Parameter | Type | Description |
---|---|---|
id | string |
Specifies the shape id on an image. |
Returns ShapeSettings
Get all the shapes details which is drawn on an image editor.
Returns ShapeSettings[]
Load/opens an image for editing within an image editor.
Parameter | Type | Description |
---|---|---|
data | string | ImageData |
Specifies url of the Image or image data. |
Returns void
Enable or disable a panning on the Image Editor.
Parameter | Type | Description |
---|---|---|
value | boolean |
Specifies a value whether enable or disable panning. |
Returns void
Redo the last user action.
Returns void
Applies all the pending property changes and render the component again.
Returns void
Removes the handler from the given event listener.
Parameter | Type | Description |
---|---|---|
eventName | string |
A String that specifies the name of the event to remove |
handler | Function |
Specifies the function to remove |
Returns void
Reset all the changes and revert to original image.
Returns void
Rotate an image to clockwise and anti-clockwise.
Parameter | Type | Description |
---|---|---|
degree | number |
Specifies a degree to rotate an image. positive integer value for clockwise and negative integer value for anti-clockwise rotation. |
Returns boolean
Perform selection in an image editor. The selection helps to crop an image.
Parameter | Type | Description |
---|---|---|
type | string |
Specifies the shape - circle / square / custom selection / pre-defined ratios. |
startX (optional) | number |
– Specifies the start x-coordinate point of the selection. |
startY (optional) | number |
– Specifies the start y-coordinate point of the selection. |
width (optional) | number |
Specifies the width of the selection area. |
height (optional) | number |
Specifies the height of the selection area. |
Returns void
Selects a shape based on the given shape id. The id can be got from the public method ‘getShapeSettings’.
Parameter | Type | Description |
---|---|---|
id | string |
Specifies the shape id to select a shape on an image. |
Returns boolean
Undo the last user action.
Returns void
To refresh the Canvas Wrapper.
Returns void
Increase / Decrease the magnification of an image.
Parameter | Type | Description |
---|---|---|
value | number |
Specifies a value to be zoomed on the image. |
Returns void
Dynamically injects the required modules to the component.
Parameter | Type | Description |
---|---|---|
moduleList | Function[] |
? |
Returns void
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.