ImageEditor

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>

Properties

cssClass

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>

disabled

boolean

Specifies whether the Image Editor is disabled.

Defaults to false

finetuneSettings

FinetuneSettingsModel

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.

height

string

Specifies the height of the Image Editor.

Defaults to ‘100%’

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

theme

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

toolbar

[]

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>

toolbarTemplate

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>

width

string

Specifies the width of the Image Editor.

Defaults to ‘100%’

Methods

addEventListener

Adds the handler to the given event listener.

Returns void

appendTo

Appends the control within the given HTML element

Returns void

applyImageFilter

To apply the filters to an image

Returns void

clearSelection

Clear a current selection.

Returns void

crop

Crops an image based on the selection. The selection can be done through programmatically using the select method or through UI interactions.

Returns boolean

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

deleteShape

Deletes a shape based on the given shape id. The id can be got from the public method getShapeSettings.

Returns void

drawEllipse

Draw ellipse on an image.

Returns boolean

drawLine

Draw line on an image.

Returns boolean

drawRectangle

Draw a rectangle on an image.

Returns boolean

drawText

Draw a text on an image.

Returns boolean

export

Export an image using the specified file name and the extension.

Returns void

finetuneImage

To apply the filters to an image

Returns void

flip

Flips an image by horizontally or vertically.

Returns void

freehandDraw

Enable or disable a freehand drawing in an Image Editor.

Returns void

getImageData

Return an image as ImageData.

Returns ImageData

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

getShapeSetting

Get particular shapes details based on id of the shape which is drawn on an image editor.

Returns ShapeSettings

getShapeSettings

Get all the shapes details which is drawn on an image editor.

Returns ShapeSettings[]

open

Load/opens an image for editing within an image editor.

Returns void

pan

Enable or disable a panning on the Image Editor.

Returns void

redo

Redo the last user action.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Returns void

reset

Reset all the changes and revert to original image.

Returns void

rotate

Rotate an image to clockwise and anti-clockwise.

Returns boolean

select

Perform selection in an image editor. The selection helps to crop an image.

Returns void

selectShape

Selects a shape based on the given shape id. The id can be got from the public method ‘getShapeSettings’.

Returns boolean

undo

Undo the last user action.

Returns void

update

To refresh the Canvas Wrapper.

Returns void

zoom

Increase / Decrease the magnification of an image.

Returns void

Inject

Dynamically injects the required modules to the component.

Returns void

Events

beforeSave

EmitType<BeforeSaveEventArgs>

Triggers before an image is saved.

created

EmitType<Event>

Triggers once the component rendering is completed.

cropping

EmitType<CropEventArgs>

Triggers while cropping an image.

destroyed

EmitType<Event>

Triggers once the component is destroyed with its elements and bound events.

fileOpened

EmitType<OpenEventArgs>

Triggers once an image is opened.

finetuneValueChanging

EmitType<FinetuneEventArgs>

Triggers when applying fine tune to an image.

flipping

EmitType<FlipEventArgs>

Triggers while flipping an image.

imageFiltering

EmitType<ImageFilterEventArgs>

Triggers when applying filter to an image.

panning

EmitType<PanEventArgs>

Triggers while panning an image.

rotating

EmitType<RotateEventArgs>

Triggers while rotating an image.

saved

EmitType<SaveEventArgs>

Triggers once an image is saved.

shapeChanging

EmitType<ShapeChangeEventArgs>

Triggers while changing shapes in an image.

toolbarCreated

EmitType<ToolbarEventArgs>

Triggers once the toolbar is created.

toolbarItemClicked

EmitType<ClickEventArgs>

Triggers once the toolbar item is clicked.

toolbarUpdating

EmitType<ToolbarEventArgs>

Triggers while updating/refreshing the toolbar

zooming

EmitType<ZoomEventArgs>

Triggers while zooming an image.