ImageEditorModel API in Vue Image Editor API component

Interface for a class ImageEditor

Properties

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.

editComplete

EmitType<EditCompleteEventArgs>

Event callback that is triggered after the completion of an editing action in the image editor. This event occurs after the image editor canvas has been updated through following actions such as cropping, drawing annotations, applying filters, fine-tuning, or other customizations.

It provides an opportunity to perform additional tasks, such as comparing the current image data with previous states or triggering further processing based on the changes.

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.

shapeChange

EmitType<ShapeChangeEventArgs>

Event callback that is raised after shape changing action is performed 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.

allowUndoRedo

boolean

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

cssClass

string

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

disabled

boolean

Defines whether an Image Editor component is enabled or disabled.

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>

fontFamily

FontFamilyModel

Predefine the font families that populate in font family dropdown list from the toolbar.

height

string

Specifies the height of the Image Editor.

locale

string

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

quickAccessToolbarTemplate

string | Function

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

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.

theme

string | Theme

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

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.
• Straightening: helps to rotate an image by a specified angle.
• 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.
• Frame: helps to add decorative borders or frames around images.
• Resize: helps to modify the dimensions of an image.
• ZoomIn: performs zoom-in an image.
• ZoomOut: performs zoom-out an image.
• Save: save the modified image.
• Open: open an image to perform editing.
• Undo: helps to revert the last action.
• Redo: helps to redo the last action.
• 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>

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>

uploadSettings

UploadSettingsModel

Represents the settings for configuring image uploads. This object allows you to specify restrictions on the types and sizes of images that can be uploaded, ensuring that only valid files are accepted according to the defined criteria.

The following options are available in uploadSettings.

• allowedExtensions: Specifies the allowed file extensions for uploaded images. The default value is null.
• minFileSize: Specifies the minimum size (in bytes) for the uploaded image. The default value is null.
• maxFileSize: Specifies the maximum size (in bytes) for the uploaded image. The default value is null.

width

string

Specifies the width of an Image Editor.

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>