Vue
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

ImageEditorComponent

Represents the VueJS ImageEditor Component.

<ejs-imageeditor></ejs-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.

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 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, text 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.

Defaults to *null

<template>
  <div style="height: 500px">
    <ejs-imageeditor id="image-editor" ref="imageEditorObj" :toolbar="toolbar"></ejs-imageeditor>
  </div>
</template>
<script>
  import Vue from "vue";
  import { ImageEditorPlugin } from "@syncfusion/ej2-vue-image-editor";

  Vue.use(ImageEditorPlugin);

  export default {
    data() {
      return {
        toolbar: ['Crop', 'ZoomIn', 'ZoomOut', 'Transform', {text: 'Custom'}]
      };
     
    }
  };
</script>
```*

<h3 class="doc-prop-wrapper" id="toolbartemplate" data-Path="toolbartemplate-toolbarTemplate">
<a href="#toolbartemplate" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>toolbarTemplate</span>

<span class="doc-prop-type"> `string`
</span>

</h3>


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.

Defaults to *null
```html
<template>
  <div style="height: 500px">
    <ejs-imageeditor id="image-editor" ref="imageEditorObj" :toolbarTemplate="toolbarTemplate">
    </ejs-imageeditor>
  </div>
</template>
<script>
  import Vue from "vue";
  import { ImageEditorPlugin } from "@syncfusion/ej2-vue-image-editor";
  import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
  Vue.use(ButtonPlugin);
  Vue.use(ImageEditorPlugin);

  export default {
    data: function() {
      return {
        toolbarTemplate: () => {
          return {
            template : Vue.component('toolbarTemplate', {
                        template:
            `<ejs-button class="e-btn" id='dltbtn'>Custom</ejs-button>`
            })
          }
        }
      };
    }
  };
</script>
```*

<h3 class="doc-prop-wrapper" id="width" data-Path="width-width">
<a href="#width" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>width</span>

<span class="doc-prop-type"> `string`
</span>

</h3>


Specifies the width of an Image Editor.

Defaults to *'100%'*

<h3 class="doc-prop-wrapper" id="zoomsettings" data-Path="zoomsettings-zoomSettings">
<a href="#zoomsettings" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>zoomSettings</span>

<span class="doc-prop-type"> `ZoomSettingsModel`
</span>

</h3>


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.

## Methods

### applyImageFilter

Filtering an image with the given type of filters.

| Parameter | Type | Description |
|------|------|-------------|
| filterOption |  `ImageFilterOption` | Specifies the filter options to the image.<br> |

Returns *void*

### 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.

Returns *boolean*

### 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.

| Parameter | Type | Description |
|------|------|-------------|
| id |  `string` | Specifies the shape id to delete the shape on an image. |

Returns *void*

### drawEllipse

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` | Specifies the radius x point for the ellipse. |
| radiusY (*optional*) |  `number` | Specifies the radius y point for the ellipse. |
| strokeWidth (*optional*) |  `number` | Specifies the stroke width of ellipse. |
| strokeColor (*optional*) |  `string` | Specifies the stroke color of ellipse. |
| fillColor (*optional*) |  `string` | Specifies the fill color of the ellipse. |

Returns *boolean*

### drawLine

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*

### drawRectangle

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` | Specifies the fill color of the rectangle. |

Returns *boolean*

### drawText

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

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<br> |

Returns *void*

### finetuneImage

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

| Parameter | Type | Description |
|------|------|-------------|
| finetuneOption |  `ImageFinetuneOption` | Specifies the finetune options to be performed in the image. |
| value |  `number` | Specifies the value for finetuning the image.<br> |

Returns *void*

### flip

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

| Parameter | Type | Description |
|------|------|-------------|
| direction |  `Direction` | Specifies the direction to flip the image.<br>A horizontal direction for horizontal flipping and vertical direction for vertical flipping.<br> |

Returns *void*

### freehandDraw

Enable or disable a freehand drawing in an Image Editor.

| Parameter | Type | Description |
|------|------|-------------|
| value |  `boolean` | Specifies a value whether to enable or disable freehand drawing.<br> |

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*

### getShapeSetting

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*

### getShapeSettings

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

Returns *ShapeSettings[]*

### open

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

| Parameter | Type | Description |
|------|------|-------------|
| data |  `string` &#124;  `ImageData` | Specifies url of the image or image data.<br> |

Returns *void*

### pan

Enable or disable a panning on the Image Editor.

| Parameter | Type | Description |
|------|------|-------------|
| value |  `boolean` | Specifies a value whether enable or disable panning.<br> |

Returns *void*

### redo

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

Returns *void*

### reset

Reset all the changes done in an image editor and revert to original image.

Returns *void*

### rotate

Rotate an image to clockwise and anti-clockwise.

| Parameter | Type | Description |
|------|------|-------------|
| degree |  `number` | Specifies a degree to rotate an image.<br>A positive integer value for clockwise and negative integer value for anti-clockwise rotation.<br> |

Returns *boolean*

### select

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.<br> |

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.

| Parameter | Type | Description |
|------|------|-------------|
| id |  `string` | Specifies the shape id to select a shape on an image. |

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.

| Parameter | Type | Description |
|------|------|-------------|
| zoomFactor |  `number` | The percentage-based zoom factor to use (e.g. 20 for 2x zoom). |
| zoomPoint (*optional*) |  `Point` | The point in the image editor to zoom in/out on.<br> |

Returns *void*

## Events

<h3 class="doc-prop-wrapper" id="beforesave" data-Path="beforesave-beforeSave">
<a href="#beforesave" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>beforeSave</span>

<span class="doc-prop-type">  `EmitType<BeforeSaveEventArgs>`
</span>

</h3>


Event callback that is raised before an image is saved.

<h3 class="doc-prop-wrapper" id="click" data-Path="click-click">
<a href="#click" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>click</span>

<span class="doc-prop-type">  `EmitType<ImageEditorClickEventArgs>`
</span>

</h3>


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

<h3 class="doc-prop-wrapper" id="created" data-Path="created-created">
<a href="#created" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>created</span>

<span class="doc-prop-type">  `EmitType<Event>`
</span>

</h3>


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

<h3 class="doc-prop-wrapper" id="cropping" data-Path="cropping-cropping">
<a href="#cropping" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>cropping</span>

<span class="doc-prop-type">  `EmitType<CropEventArgs>`
</span>

</h3>


Event callback that is raised while cropping an image.

<h3 class="doc-prop-wrapper" id="destroyed" data-Path="destroyed-destroyed">
<a href="#destroyed" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>destroyed</span>

<span class="doc-prop-type">  `EmitType<Event>`
</span>

</h3>


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

<h3 class="doc-prop-wrapper" id="fileopened" data-Path="fileopened-fileOpened">
<a href="#fileopened" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>fileOpened</span>

<span class="doc-prop-type">  `EmitType<OpenEventArgs>`
</span>

</h3>


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

<h3 class="doc-prop-wrapper" id="finetunevaluechanging" data-Path="finetunevaluechanging-finetuneValueChanging">
<a href="#finetunevaluechanging" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>finetuneValueChanging</span>

<span class="doc-prop-type">  `EmitType<FinetuneEventArgs>`
</span>

</h3>


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

<h3 class="doc-prop-wrapper" id="flipping" data-Path="flipping-flipping">
<a href="#flipping" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>flipping</span>

<span class="doc-prop-type">  `EmitType<FlipEventArgs>`
</span>

</h3>


Event callback that is raised while flipping an image.

<h3 class="doc-prop-wrapper" id="imagefiltering" data-Path="imagefiltering-imageFiltering">
<a href="#imagefiltering" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>imageFiltering</span>

<span class="doc-prop-type">  `EmitType<ImageFilterEventArgs>`
</span>

</h3>


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

<h3 class="doc-prop-wrapper" id="panning" data-Path="panning-panning">
<a href="#panning" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>panning</span>

<span class="doc-prop-type">  `EmitType<PanEventArgs>`
</span>

</h3>


Event callback that is raised while panning an image.

<h3 class="doc-prop-wrapper" id="rotating" data-Path="rotating-rotating">
<a href="#rotating" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>rotating</span>

<span class="doc-prop-type">  `EmitType<RotateEventArgs>`
</span>

</h3>


Event callback that is raised while rotating an image.

<h3 class="doc-prop-wrapper" id="saved" data-Path="saved-saved">
<a href="#saved" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>saved</span>

<span class="doc-prop-type">  `EmitType<SaveEventArgs>`
</span>

</h3>


Event callback that is raised once an image is saved.

<h3 class="doc-prop-wrapper" id="shapechanging" data-Path="shapechanging-shapeChanging">
<a href="#shapechanging" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>shapeChanging</span>

<span class="doc-prop-type">  `EmitType<ShapeChangeEventArgs>`
</span>

</h3>


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

<h3 class="doc-prop-wrapper" id="toolbarcreated" data-Path="toolbarcreated-toolbarCreated">
<a href="#toolbarcreated" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>toolbarCreated</span>

<span class="doc-prop-type">  `EmitType<ToolbarEventArgs>`
</span>

</h3>


Event callback that is raised once the toolbar is created.

<h3 class="doc-prop-wrapper" id="toolbaritemclicked" data-Path="toolbaritemclicked-toolbarItemClicked">
<a href="#toolbaritemclicked" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>toolbarItemClicked</span>

<span class="doc-prop-type">  `EmitType<ClickEventArgs>`
</span>

</h3>


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

<h3 class="doc-prop-wrapper" id="toolbarupdating" data-Path="toolbarupdating-toolbarUpdating">
<a href="#toolbarupdating" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>toolbarUpdating</span>

<span class="doc-prop-type">  `EmitType<ToolbarEventArgs>`
</span>

</h3>


Event callback that is raised while updating/refreshing the toolbar

<h3 class="doc-prop-wrapper" id="zooming" data-Path="zooming-zooming">
<a href="#zooming" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>zooming</span>

<span class="doc-prop-type">  `EmitType<ZoomEventArgs>`
</span>

</h3>


Event callback that is raised while zooming an image.
Previous
Next