ImageEditor

The Image Editor is a graphical user interface for editing images.

<div style="height: 500px">
  <div id='imageeditor'></div>
</div>

import { ImageEditor } from '@syncfusion/ej2-image-editor';

let imageObj: ImageEditor = new ImageEditor({
});
imageObj.appendTo('#imageeditor');

Properties

allowUndoRedo

boolean

Specifies a boolean value whether enable undo/redo operations in the image editor.

Defaults to true

cssClass

string

Defines one or more CSS classes that can be used to customize the appearance of an Image Editor component.

Defaults to ”

disabled

boolean

Defines whether an Image Editor component is enabled or disabled.

Defaults to false

finetuneSettings

FinetuneSettingsModel

Specifies the finetune settings option which can be used to perform color adjustments in the image editor control.

<div style="height: 500px">
  <div id='imageeditor'></div>
</div>

import { ImageEditor } from '@syncfusion/ej2-image-editor';

let imageObj: ImageEditor = new ImageEditor({
  finetuneSettings: {
    brightness: { min: -100, max: 100, defaultValue: 0 },
    contrast: { min: -100, max: 100, defaultValue: 0 }
  }
});
imageObj.appendTo('#imageeditor');

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 ”

quickAccessToolbarTemplate

string | Function

Specifies a template for the quick access toolbar. Use this property to customize the quick access toolbar.

Defaults to null

selectionSettings

SelectionSettingsModel

Specifies the selection settings to customize selection. A ‘SelectionSettingsModel’ value that specifies the the customization related options which are enabled in image editor control. The default value is null.

showQuickAccessToolbar

boolean

Specifies whether to show/hide the quick access toolbar.

Defaults to true

theme

string | Theme

Specifies the theme of the Image Editor. The appearance of the shape selection in Image Editor is determined by this property.

Defaults to Theme.Bootstrap5

toolbar

[]

Specifies the toolbar items to perform UI interactions. It accepts both string[] and ItemModel[] to configure its toolbar items. The default value is null. If the property is not defined in the control, the default toolbar will be rendered with preconfigured toolbar commands. If the property is defined as empty collection, the toolbar will not be rendered. 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, path, text, image and freehand drawing with resize, drag and drop, and customize its appearance.
• Transform: helps to rotate and flip an image.
• Finetunes: helps to perform adjustments on an image.
• Filters: helps to perform predefined color filters.
• ZoomIn: performs zoom-in an image.
• ZoomOut: performs zoom-out an image.
• Save: save the modified image.
• Open: open an image to perform editing.
• Reset: reset the modification and restore the original image.

<div style="height: 500px">
  <div id='imageeditor'></div>
</div>

import { ImageEditor } from '@syncfusion/ej2-image-editor';

let imageObj: ImageEditor = new ImageEditor({
  toolbar: ['Crop', 'ZoomIn', 'ZoomOut', 'Transform', {text: 'Custom'}]
});
imageObj.appendTo('#imageeditor');

Defaults to null

toolbarTemplate

string | Function

Specifies a custom template for the toolbar of an image editor control. A string that specifies a custom template for the toolbar of the image editor. If this property is defined, the ‘toolbar’ property will not have any effect.

<div style="height: 500px">
  <div id='imageeditor'></div>
</div>
<script id="toolbarTemplate" type="text/x-template">
  <div class = 'e-toolbar'>
    <button id= 'dltbtn'>Custom</button>
  </div>
</script>

import { ImageEditor } from '@syncfusion/ej2-image-editor';

let imageObj: ImageEditor = new ImageEditor({
  toolbarTemplate: '#toolbarTemplate'
});
imageObj.appendTo('#imageeditor');

Defaults to null

width

string

Specifies the width of an Image Editor.

Defaults to ‘100%’

zoomSettings

ZoomSettingsModel

Specifies the zoom settings to perform zooming action. A ‘ZoomSettingsModel’ value that specifies the the zoom related options which are enabled in image editor control. The default value is null.

<div style="height: 500px">
  <div id='imageeditor'></div>
</div>

import { ImageEditor, ZoomTrigger } from '@syncfusion/ej2-image-editor';

let imageObj: ImageEditor = new ImageEditor({
  zoomSettings: {
    minZoomFactor: 1,
    maxZoomFactor: 100,
    zoomFactor: 1,
    zoomTrigger: ZoomTrigger.MouseWheel | ZoomTrigger.Pinch | ZoomTrigger.Toolbar | ZoomTrigger.Commands,
    zoomPoint: new Point {x: 500, y: 500}
  }
});
imageObj.appendTo('#imageeditor');

Methods

addEventListener

Adds the handler to the given event listener.

Returns void

appendTo

Appends the control within the given HTML element

Returns void

applyImageFilter

Filtering an image with the given type of filters.

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns any

clearSelection

Clears the current selection performed in the image editor.

Returns void

crop

Crops an image based on the selection done in the image editor.

<div style="height: 500px">
  <div id='imageeditor'></div>
</div>

import { ImageEditor } from '@syncfusion/ej2-image-editor';

let imageObj: ImageEditor = new ImageEditor({
  created: () => {
    imageObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
    imageObj.select('16:9', 10, 10);
    imageObj.crop();
  }
});
imageObj.appendTo('#imageeditor');

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. Use ‘getShapeSettings’ method to get the shape id which is then passed to perform selection.

<div style="height: 500px">
  <div id='imageeditor'></div>
</div>

import { ImageEditor } from '@syncfusion/ej2-image-editor';

let imageObj: ImageEditor = new ImageEditor({
  created: () => {
    imageObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
    imageObj.drawEllipse(10, 10, 40, 60);
    imageObj.drawEllipse(10, 80, 40, 130);
    imageObj.selectShape('shape_1');
  }
});
imageObj.appendTo('#imageeditor');

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns any

drawArrow

Draw arrow on an image.

Returns boolean

drawEllipse

Draw ellipse on an image.

<div style="height: 500px">
  <div id='imageeditor'></div>
</div>

import { ImageEditor } from '@syncfusion/ej2-image-editor';

let imageObj: ImageEditor = new ImageEditor({
  created: () => {
    imageObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
    imageObj.drawEllipse(10, 10, 40, 60);
  }
});
imageObj.appendTo('#imageeditor');

Returns boolean

drawFrame

Draw a frame on an image.

Returns boolean

drawImage

Draw an image as annotation on an image.

Returns boolean

drawLine

Draw line on an image.

Returns boolean

drawPath

Draw path on an image.

Returns boolean

drawRectangle

Draw a rectangle on an image.

Returns boolean

drawText

Draw a text on an image.

<div style="height: 500px">
  <div id='imageeditor'></div>
</div>

import { ImageEditor } from '@syncfusion/ej2-image-editor';

let imageObj: ImageEditor = new ImageEditor({
  created: () => {
    imageObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
    imageObj.drawText(10, 10, 'Syncfusion', 'Arial', 12, true, true, '#000');
  }
});
imageObj.appendTo('#imageeditor');

Returns boolean

export

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

Returns void

finetuneImage

Finetuning an image with the given type of finetune and its value in the image editor.

Returns void

flip

Flips an image by horizontally or vertically in the image editor.

<div style="height: 500px">
  <div id='imageeditor'></div>
</div>

import { ImageEditor } from '@syncfusion/ej2-image-editor';

let imageObj: ImageEditor = new ImageEditor({
  created: () => {
    imageObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
    imageObj.zoom(40, {x: 400, y: 400});
  }
});
imageObj.appendTo('#imageeditor');

Returns void

freehandDraw

Enable or disable a freehand drawing in an Image Editor.

Returns void

getImageData

Returns an image as ImageData to load it in to a canvas.

Returns ImageData

getImageDimension

Get the dimension of an image in the image editor such as x, y, width, and height. The method helps to get dimension after cropped an image.

Returns Dimension

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.

<div style="height: 500px">
  <div id='imageeditor'></div>
</div>

import { ImageEditor, ShapeSettings } from '@syncfusion/ej2-image-editor';

let imageObj: ImageEditor = new ImageEditor({
  created: () => {
    imageObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
    imageObj.drawEllipse(10, 10, 40, 60);
    imageObj.drawEllipse(10, 80, 40, 130);
    let shape: ShapeSettings = imageObj.getShapeSetting('shape_1');
    console.log(shape.type);
  }
});
imageObj.appendTo('#imageeditor');

Returns ShapeSettings

getShapeSettings

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

Returns ShapeSettings[]

handleUnload

Handling unload event to persist data when enable persistence true

Returns any

open

Opens an image as URL or ImageData for editing in an image editor.

Returns void

pan

Enable or disable a panning on the Image Editor.

Returns void

redo

Redo the last user action that was undone by the user or undo method.

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 done in an image editor and revert to original image.

Returns void

resize

Resize an image by changing its width and height.

Returns boolean

rotate

Rotate an image to clockwise and anti-clockwise.

<div style="height: 500px">
  <div id='imageeditor'></div>
</div>

import { ImageEditor } from '@syncfusion/ej2-image-editor';

let imageObj: ImageEditor = new ImageEditor({
  created: () => {
    imageObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
    imageObj.rotate(90);
  }
});
imageObj.appendTo('#imageeditor');

Returns boolean

select

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

<div style="height: 500px">
  <div id='imageeditor'></div>
</div>

import { ImageEditor } from '@syncfusion/ej2-image-editor';

let imageObj: ImageEditor = new ImageEditor({
  created: () => {
    imageObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
    imageObj.select('16:9', 10, 10);
  }
});
imageObj.appendTo('#imageeditor');

Returns void

selectShape

Select a shape based on the given shape id. Use ‘getShapeSettings’ method to get the shape id which is then passed to perform selection.

<div style="height: 500px">
  <div id='imageeditor'></div>
</div>

import { ImageEditor } from '@syncfusion/ej2-image-editor';

let imageObj: ImageEditor = new ImageEditor({
  created: () => {
    imageObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
    imageObj.drawEllipse(10, 10, 40, 60);
    imageObj.drawEllipse(10, 80, 40, 130);
    imageObj.selectShape('shape_1');
  }
});
imageObj.appendTo('#imageeditor');

Returns boolean

undo

Reverse the last action which performed by the user in the Image Editor.

Returns void

update

To refresh the Canvas Wrapper.

Returns void

zoom

Zoom in or out on a point in the image editor.

Returns void

Inject

Dynamically injects the required modules to the component.

Returns void

Events

beforeSave

EmitType<BeforeSaveEventArgs>

Event callback that is raised before an image is saved.

click

EmitType<ImageEditorClickEventArgs>

Event callback that is raised while clicking on an image in the Image Editor.

created

EmitType<Event>

Event callback that is raised after rendering the Image Editor component.

cropping

EmitType<CropEventArgs>

Event callback that is raised while cropping an image.

destroyed

EmitType<Event>

Event callback that is raised once the component is destroyed with its elements and bound events.

fileOpened

EmitType<OpenEventArgs>

Event callback that is raised once an image is opened in an Image Editor.

finetuneValueChanging

EmitType<FinetuneEventArgs>

Event callback that is raised when applying fine tune to an image.

flipping

EmitType<FlipEventArgs>

Event callback that is raised while flipping an image.

frameChange

EmitType<FrameChangeEventArgs>

Event callback that is raised while applying frames on an image.

imageFiltering

EmitType<ImageFilterEventArgs>

Event callback that is raised when applying filter to an image.

panning

EmitType<PanEventArgs>

Event callback that is raised while panning an image.

quickAccessToolbarItemClick

EmitType<ClickEventArgs>

Event callback that is raised once the quick access toolbar item is clicked.

quickAccessToolbarOpen

EmitType<QuickAccessToolbarEventArgs>

Event callback that is raised when opening the quick access toolbar.

resizing

EmitType<ResizeEventArgs>

Event callback that is raised while resizing an image.

rotating

EmitType<RotateEventArgs>

Event callback that is raised while rotating an image.

saved

EmitType<SaveEventArgs>

Event callback that is raised once an image is saved.

selectionChanging

EmitType<SelectionChangeEventArgs>

Event callback that is raised while changing selection in an Image Editor.

shapeChanging

EmitType<ShapeChangeEventArgs>

Event callback that is raised while changing shapes in an Image Editor.

toolbarCreated

EmitType<ToolbarEventArgs>

Event callback that is raised once the toolbar is created.

toolbarItemClicked

EmitType<ClickEventArgs>

Event callback that is raised once the toolbar item is clicked.

toolbarUpdating

EmitType<ToolbarEventArgs>

Event callback that is raised while updating/refreshing the toolbar

<div style="height: 500px">
  <div id='imageeditor'></div>
</div>

import { ImageEditor, ToolbarEventArgs } from '@syncfusion/ej2-image-editor';

let imageObj: ImageEditor = new ImageEditor({
  showQuickAccessToolbar: true,
  toolbarUpdating: (args: ToolbarEventArgs) => {
    if (args.toolbarType === 'shapes') {
      args.toolbarItems = ['fillColor', 'strokeColor', 'strokeWidth', { text: 'Click', template: '<button class="e-btn" id="shape">Click</button>', tooltipText: 'Click', prefixIcon: 'e-expand', id: 'Click' }];
    }
  },
});
imageObj.appendTo('#imageeditor');

zooming

EmitType<ZoomEventArgs>

Event callback that is raised while zooming an image.