Vue

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.

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

  Vue.use(ImageEditorPlugin);

  export default {
    data() {
      return {
        finetuneSetting: {
          brightness: { min: -100, max: 100, defaultValue: 0 },
          contrast: { min: -100, max: 100, defaultValue: 0 }
        }
      };
    }
  };
</script>

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

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.

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

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.

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

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.

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

  Vue.use(ImageEditorPlugin);

  export default {
    data() {
      return {
        zoomSetting: {
          minZoomFactor: 1,
          maxZoomFactor: 100,
          zoomFactor: 1,
          zoomTrigger: ZoomTrigger.MouseWheel | ZoomTrigger.Pinch | ZoomTrigger.Toolbar | ZoomTrigger.Commands,
          zoomPoint: {x: 500, y: 500}
        }
      };
    }
  };
</script>

Methods

applyImageFilter

Filtering an image with the given type of filters.

Parameter	Type	Description
filterOption	`ImageFilterOption`	Specifies the filter options to the image.

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.

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

  Vue.use(ImageEditorPlugin);

  export default {
    data() {
      return {
      };
      methods: {
      created: function() {
        this.$refs.imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        this.$refs.imageEditorObj.select('16:9', 10, 10);
        this.$refs.imageEditorObj.crop();
      }
      }
    }
  };
</script>

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.

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

  Vue.use(ImageEditorPlugin);

  export default {
    data() {
      return {
      };
      methods: {
      created: function() {
        this.$refs.imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        this.$refs.imageEditorObj.drawEllipse(10, 10, 40, 60);
        this.$refs.imageEditorObj.drawEllipse(10, 80, 40, 130);
        this.$refs.imageEditorObj.selectShape('shape_1');
      }
      }
    }
  };
</script>

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

Returns void

drawArrow

Draw arrow on an image.

Parameter	Type	Description
startX (optional)	`number`	– Specifies start point x-coordinate of arrow.
startY (optional)	`number`	– Specifies start point y-coordinate of arrow.
endX (optional)	`number`	Specifies end point x-coordinates of arrow.
endY (optional)	`number`	Specifies end point y-coordinates of the arrow.
strokeWidth (optional)	`number`	Specifies the stroke width of arrow.
strokeColor (optional)	`string`	Specifies the stroke color of arrow.
arrowStart (optional)	`ArrowheadType`	– Specifies the type of arrowhead for start position. The default value is ‘None’.
arrowEnd (optional)	`ArrowheadType`	– Specifies the type of arrowhead for end position. The default value is ‘SolidArrow’.

Returns boolean

drawEllipse

Draw ellipse on an image.

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

  Vue.use(ImageEditorPlugin);

  export default {
    data() {
      return {
      };
      methods: {
      created: function() {
        this.$refs.imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        this.$refs.imageEditorObj.drawEllipse(10, 10, 40, 60);
      }
      }
    }
  };
</script>

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.
degree (optional)	`number`	Specifies the degree to rotate the ellipse.

Returns boolean

drawFrame

Draw a frame on an image.

Parameter	Type	Description
frameType	`FrameType`	Specifies the frame option to be drawn on an image.
color (optional)	`string`	Specifies the color of a frame on an image. The default value is ‘#fff’.
gradientColor (optional)	`string`	Specifies the gradient color of a frame on an image. The default value is ‘’.
size (optional)	`number`	Specifies the size of the frame as a percentage. It can be provided as an integer percentage (e.g., 10). Defaults to 20 if not specified.
inset (optional)	`number`	Specifies the inset value for line, hook, and inset type frames, as a percentage. It can be provided as an integer percentage (e.g., 10). Defaults to 0 if not specified.
offset (optional)	`number`	Specifies the offset value for line and inset type frames, as a percentage. It can be provided as an integer percentage (e.g., 10). Defaults to 0 if not specified.
borderRadius (optional)	`number`	Specifies the border radius for line-type frames, as a percentage. It can be provided as an integer percentage (e.g., 10). Defaults to 0 if not specified.
frameLineStyle (optional)	`FrameLineStyle`	Specifies the type of line to be drawn for line-type frames. Default to Solid if not specified.
lineCount (optional)	`number`	Specifies the number of lines for line-type frames. Defaults to 0 if not specified.

Returns boolean

drawImage

Draw an image as annotation on an image.

Parameter	Type	Description
data	`string` \| `ImageData`	Specifies url of the image or image data.
x (optional)	`number`	Specifies x-coordinate of a starting point for an image.
y (optional)	`number`	Specifies y-coordinate of a starting point for an image.
width (optional)	`number`	Specifies the width of the image.
height (optional)	`number`	Specifies the height of the image.
isAspectRatio (optional)	`boolean`	Specifies whether to maintain aspect ratio or not.
degree (optional)	`number`	Specifies the degree to rotate the image.

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

drawPath

Draw path on an image.

Parameter	Type	Description
pointColl	`Point[]`	– Specifies collection of start and end x, y-coordinates of path.
strokeWidth (optional)	`number`	Specifies the stroke width of path.
strokeColor (optional)	`string`	Specifies the stroke color of path.

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.
degree (optional)	`number`	Specifies the degree to rotate the rectangle.

Returns boolean

drawText

Draw a text on an image.

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

  Vue.use(ImageEditorPlugin);

  export default {
    data() {
      return {
      };
      methods: {
      created: function() {
        this.$refs.imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        this.$refs.imageEditorObj.drawText(10, 10, 'Syncfusion', 'Arial', 12, true, true, '#000');
        }
      }
    }
  };
</script>

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

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.

Returns void

flip

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

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

  Vue.use(ImageEditorPlugin);

  export default {
    data() {
      return {
      };
      methods: {
      created: function() {
        this.$refs.imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        this.$refs.imageEditorObj.zoom(40, {x: 400, y: 400});
        }
      }
    }
  };
</script>

Parameter	Type	Description
direction	`Direction`	Specifies the direction to flip the image. A horizontal direction for horizontal flipping and vertical direction for vertical flipping.

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.

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.

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

  Vue.use(ImageEditorPlugin);

  export default {
    data() {
      return {
      };
      methods: {
      created: function() {
        this.$refs.imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        this.$refs.imageEditorObj.drawEllipse(10, 10, 40, 60);
        this.$refs.imageEditorObj.drawEllipse(10, 80, 40, 130);
        let shape: ShapeSettings = imageObj.getShapeSetting('shape_1');
        console.log(shape.type);
      }
      }
    }
  };
</script>

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` \| `ImageData`	Specifies url of the image or image data.

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.

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

resize

Resize an image by changing its width and height.

Parameter	Type	Description
width	`number`	Specifies the width of an image.
height	`number`	Specifies the height of an image.
isAspectRatio (optional)	`boolean`	Specifies whether the scaling option is enabled or not.

Returns boolean

rotate

Rotate an image to clockwise and anti-clockwise.

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

  Vue.use(ImageEditorPlugin);

  export default {
    data() {
      return {
      };
      methods: {
      created: function() {
        this.$refs.imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        this.$refs.imageEditorObj.rotate(90);
      }
      }
    }
  };
</script>

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

Returns boolean

select

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

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

  Vue.use(ImageEditorPlugin);

  export default {
    data() {
      return {
      };
      methods: {
      created: function() {
        this.$refs.imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        this.$refs.imageEditorObj.select('16:9', 10, 10);
      }
      }
    }
  };
</script>

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

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.

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

  Vue.use(ImageEditorPlugin);

  export default {
    data() {
      return {
      };
      methods: {
      created: function() {
        this.$refs.imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        this.$refs.imageEditorObj.drawEllipse(10, 10, 40, 60);
        this.$refs.imageEditorObj.drawEllipse(10, 80, 40, 130);
        this.$refs.imageEditorObj.selectShape('shape_1');
        }
      }
    }
  };
</script>

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.

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

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

  Vue.use(ImageEditorPlugin);

  export default {
    data() {
      return {
      };
    },
    methods: {
        toolbarUpdate: function (args) {
            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' }];
            }
        }
      }
  };
</script>

<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 id="shape"></button>', tooltipText: 'Click', prefixIcon: 'e-expand', id: 'Click' }];
    }
  },
});
imageObj.appendTo('#imageeditor');

zooming
`EmitType<ZoomEventArgs>`

Event callback that is raised while zooming an image.

Contents

Properties
allowUndoRedo
cssClass
disabled
finetuneSettings
height
locale
quickAccessToolbarTemplate
selectionSettings
showQuickAccessToolbar
theme
toolbar
toolbarTemplate
width
zoomSettings
Methods
applyImageFilter
clearSelection
crop
deleteShape
drawArrow
drawEllipse
drawFrame
drawImage
drawLine
drawPath
drawRectangle
drawText
export
finetuneImage
flip
freehandDraw
getImageData
getImageDimension
getShapeSetting
getShapeSettings
open
pan
redo
reset
resize
rotate
select
selectShape
undo
update
zoom
Events
beforeSave
click
created
cropping
destroyed
fileOpened
finetuneValueChanging
flipping
frameChange
imageFiltering
panning
quickAccessToolbarItemClick
quickAccessToolbarOpen
resizing
rotating
saved
selectionChanging
shapeChanging
toolbarCreated
toolbarItemClicked
toolbarUpdating
zooming

Contents

Properties
allowUndoRedo
cssClass
disabled
finetuneSettings
height
locale
quickAccessToolbarTemplate
selectionSettings
showQuickAccessToolbar
theme
toolbar
toolbarTemplate
width
zoomSettings
Methods
applyImageFilter
clearSelection
crop
deleteShape
drawArrow
drawEllipse
drawFrame
drawImage
drawLine
drawPath
drawRectangle
drawText
export
finetuneImage
flip
freehandDraw
getImageData
getImageDimension
getShapeSetting
getShapeSettings
open
pan
redo
reset
resize
rotate
select
selectShape
undo
update
zoom
Events
beforeSave
click
created
cropping
destroyed
fileOpened
finetuneValueChanging
flipping
frameChange
imageFiltering
panning
quickAccessToolbarItemClick
quickAccessToolbarOpen
resizing
rotating
saved
selectionChanging
shapeChanging
toolbarCreated
toolbarItemClicked
toolbarUpdating
zooming

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

ImageEditorComponent

Properties

allowUndoRedo boolean

cssClass string

disabled boolean

finetuneSettings FinetuneSettingsModel

height string

locale string

quickAccessToolbarTemplate string | Function

selectionSettings SelectionSettingsModel

showQuickAccessToolbar boolean

theme string | Theme

toolbar []

toolbarTemplate string | Function

width string

zoomSettings ZoomSettingsModel

Methods

applyImageFilter

clearSelection

crop

deleteShape

drawArrow

drawEllipse

drawFrame

drawImage

drawLine

drawPath

drawRectangle

drawText

export

finetuneImage

flip

freehandDraw

getImageData

getImageDimension

getShapeSetting

getShapeSettings

open

pan

redo

reset

resize

rotate

select

selectShape

undo

update

zoom

Events

beforeSave EmitType<BeforeSaveEventArgs>

click EmitType<ImageEditorClickEventArgs>

created EmitType<Event>

cropping EmitType<CropEventArgs>

destroyed EmitType<Event>

fileOpened EmitType<OpenEventArgs>

finetuneValueChanging EmitType<FinetuneEventArgs>

flipping EmitType<FlipEventArgs>

frameChange EmitType<FrameChangeEventArgs>

imageFiltering EmitType<ImageFilterEventArgs>

panning EmitType<PanEventArgs>

quickAccessToolbarItemClick EmitType<ClickEventArgs>

quickAccessToolbarOpen EmitType<QuickAccessToolbarEventArgs>

resizing EmitType<ResizeEventArgs>

rotating EmitType<RotateEventArgs>

saved EmitType<SaveEventArgs>

selectionChanging EmitType<SelectionChangeEventArgs>

shapeChanging EmitType<ShapeChangeEventArgs>

toolbarCreated EmitType<ToolbarEventArgs>

toolbarItemClicked EmitType<ClickEventArgs>

toolbarUpdating EmitType<ToolbarEventArgs>

zooming EmitType<ZoomEventArgs>

allowUndoRedo
`boolean`

cssClass
`string`

disabled
`boolean`

finetuneSettings
`FinetuneSettingsModel`

height
`string`

locale
`string`

quickAccessToolbarTemplate
`string` | `Function`

selectionSettings
`SelectionSettingsModel`

showQuickAccessToolbar
`boolean`

theme
`string` | `Theme`

toolbar
[]

toolbarTemplate
`string` | `Function`

width
`string`

zoomSettings
`ZoomSettingsModel`

beforeSave
`EmitType<BeforeSaveEventArgs>`

click
`EmitType<ImageEditorClickEventArgs>`

created
`EmitType<Event>`

cropping
`EmitType<CropEventArgs>`

destroyed
`EmitType<Event>`

fileOpened
`EmitType<OpenEventArgs>`

finetuneValueChanging
`EmitType<FinetuneEventArgs>`

flipping
`EmitType<FlipEventArgs>`

frameChange
`EmitType<FrameChangeEventArgs>`

imageFiltering
`EmitType<ImageFilterEventArgs>`

panning
`EmitType<PanEventArgs>`

quickAccessToolbarItemClick
`EmitType<ClickEventArgs>`

quickAccessToolbarOpen
`EmitType<QuickAccessToolbarEventArgs>`

resizing
`EmitType<ResizeEventArgs>`

rotating
`EmitType<RotateEventArgs>`

saved
`EmitType<SaveEventArgs>`

selectionChanging
`EmitType<SelectionChangeEventArgs>`

shapeChanging
`EmitType<ShapeChangeEventArgs>`

toolbarCreated
`EmitType<ToolbarEventArgs>`

toolbarItemClicked
`EmitType<ClickEventArgs>`

toolbarUpdating
`EmitType<ToolbarEventArgs>`

zooming
`EmitType<ZoomEventArgs>`