ImageEditorComponent

23 Sep 202524 minutes to read

Represents the EJ2 Angular 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.

  <div style='height: 500px;'>
    <ejs-imageeditor id="image-editor" [finetuneSettings]="finetuneSetting"></ejs-imageeditor>
  </div>

  import { Component, ViewEncapsulation } from '@angular/core';
  import { ImageEditorComponent } from '@syncfusion/ej2-angular-image-editor';

  @Component({
    selector: 'app-root',
    styleUrls: ['app.component.css'],
    templateUrl: 'app.component.html',
    encapsulation: ViewEncapsulation.None
  })
  export class AppComponent {
    private finetuneSetting = {
        brightness: { min: -100, max: 100, defaultValue: 0 },
        contrast: { min: -100, max: 100, defaultValue: 0 }
      }
  }

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.

Defaults to ‘100%’

imageSmoothingEnabled boolean

Determines whether high-quality images should be smoothed when rendered.

Defaults to false

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

  <div style='height: 500px;'>
    <ejs-imageeditor id="image-editor" [toolbar]="customToolbar"></ejs-imageeditor>
  </div>

  import { Component, ViewEncapsulation } from '@angular/core';
  import { ImageEditorComponent } from '@syncfusion/ej2-angular-image-editor';

  @Component({
    selector: 'app-root',
    styleUrls: ['app.component.css'],
    templateUrl: 'app.component.html',
    encapsulation: ViewEncapsulation.None
  })
  export class AppComponent {
    public customToolbar = ['Crop', 'ZoomIn', 'ZoomOut', 'Transform', {text: 'Custom'}];
  }

Defaults to null

toolbarTemplate any

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;'>
    <ejs-imageeditor id="image-editor" [showQuickAccessToolbar]= "true" >
      <ng-template #toolbarTemplate>
        <button id='dltbtn'>Custom</button>
      </ng-template>
    </ejs-imageeditor>
  </div>

  import { Component, ViewEncapsulation } from '@angular/core';
  import { ImageEditorComponent } from '@syncfusion/ej2-angular-image-editor';

  @Component({
    selector: 'app-root',
    styleUrls: ['app.component.css'],
    templateUrl: 'app.component.html',
    encapsulation: ViewEncapsulation.None
  })
  export class AppComponent {

  }

Defaults to null

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.

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;'>
    <ejs-imageeditor id="image-editor" [zoomSettings]= "zoomSetting"></ejs-imageeditor>
  </div>

  import { Component, ViewEncapsulation } from '@angular/core';
  import { ImageEditorComponent, ZoomTrigger } from '@syncfusion/ej2-angular-image-editor';

  @Component({
    selector: 'app-root',
    styleUrls: ['app.component.css'],
    templateUrl: 'app.component.html',
    encapsulation: ViewEncapsulation.None
  })
  export class AppComponent {
    public zoomSetting = {
      minZoomFactor: 1,
      maxZoomFactor: 100,
      zoomFactor: 1,
      zoomTrigger: ZoomTrigger.MouseWheel | ZoomTrigger.Pinch | ZoomTrigger.Toolbar | ZoomTrigger.Commands,
      zoomPoint: new Point {x: 500, y: 500}
    };
  }

Methods

apply

Applies the operations performed in the Image Editor, such as annotation drawings.

Returns void

applyImageFilter

Filtering an image with the given type of filters.

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

Returns void

bringForward

Moves a shape to ahead of one shape based on the given shape id.
Use ‘getShapeSettings’ method to get the shape id which is then passed to perform moving.

Parameter	Type	Description
shapeId	string	Specifies the shape id to move the shape on an image.

Returns void

bringToFront

Moves a shape to the front of all other shapes based on the given shape id.
Use ‘getShapeSettings’ method to get the shape id which is then passed to perform moving.

Parameter	Type	Description
shapeId	string	Specifies the shape id to move the shape on an image.

Returns void

canRedo

Specifies if it’s possible to redo the last recent action made in an Image Editor.

Returns boolean

canUndo

Specifies if it’s possible to undo the last recent action made in an Image Editor.

Returns boolean

clearImage

Clears the loaded image in the Image Editor.

Returns void

clearSelection

Clears the current selection performed in the image editor.

Parameter	Type	Description
resetCrop (optional)	boolean	Specifies to reset last cropped image.

Returns void

cloneShape

Duplicates a shape based on the given shape ID in the ImageEditor.
Use ‘getShapeSettings’ method to get the shape and then pass a shapeId from the returned shape to clone a shape.

Parameter	Type	Description
shapeId	string	Specifies the shape id to clone a shape on an image.

Returns boolean

crop

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

  <div style='height: 500px;'>
    <ejs-imageeditor id="image-editor" (created)="created()"></ejs-imageeditor>
  </div>

  import { Component, ViewEncapsulation } from '@angular/core';
  import { ImageEditorComponent } from '@syncfusion/ej2-angular-image-editor';

  @Component({
    selector: 'app-root',
    styleUrls: ['app.component.css'],
    templateUrl: 'app.component.html',
    encapsulation: ViewEncapsulation.None
  })
  export class AppComponent {
    public created = (): void => {
        const imageObj: ImageEditorComponent = getComponent(document.getElementById('image-editor'), 'image-editor');
        this.imageObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        this.imageObj.select('16:9', 10, 10);
        this.imageObj.crop();
    }
  }

Returns boolean

deleteRedact

Deletes a redaction based on the given shape id.
Use ‘getRedacts’ method to get the redaaction id which is then passed to perform deletion.

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

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;'>
    <ejs-imageeditor id="image-editor" (created)="created()"></ejs-imageeditor>
  </div>

  import { Component, ViewEncapsulation } from '@angular/core';
  import { ImageEditorComponent } from '@syncfusion/ej2-angular-image-editor';

  @Component({
    selector: 'app-root',
    styleUrls: ['app.component.css'],
    templateUrl: 'app.component.html',
    encapsulation: ViewEncapsulation.None
  })
  export class AppComponent {
    public created = (): void => {
        const imageObj: ImageEditorComponent = getComponent(document.getElementById('image-editor'), 'image-editor');
        this.imageObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        let dimension: any = this.imageEditorObj.getImageDimension();
        this.imageObj.drawEllipse(dimension.x, dimension.y, 40, 60);
        this.imageObj.drawEllipse(dimension.x, dimension.y+80, 40, 130);
        this.imageObj.selectShape('shape_1');
    }
  }

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

Returns void

discard

Discards the operations performed in the Image Editor, such as annotation drawings.

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’.
isSelected (optional)	boolean	Specifies to show the arrow in the selected state.

Returns boolean

drawEllipse

Draw ellipse on an image.

  <div style='height: 500px;'>
    <ejs-imageeditor id="image-editor" (created)="created()"></ejs-imageeditor>
  </div>

  import { Component, ViewEncapsulation } from '@angular/core';
  import { ImageEditorComponent } from '@syncfusion/ej2-angular-image-editor';

  @Component({
    selector: 'app-root',
    styleUrls: ['app.component.css'],
    templateUrl: 'app.component.html',
    encapsulation: ViewEncapsulation.None
  })
  export class AppComponent {
    public created = (): void => {
        const imageObj: ImageEditorComponent = getComponent(document.getElementById('image-editor'), 'image-editor');
        this.imageObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        let dimension: any = this.imageEditorObj.getImageDimension();
        this.imageObj.drawEllipse(dimension.x, dimension.y, 40, 60);
    }
  }

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.
isSelected (optional)	boolean	Specifies to show the ellipse in the selected state.

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.
opacity (optional)	number	Specifies the value for the image.
isSelected (optional)	boolean	Specifies to show the image in the selected state.

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.
isSelected (optional)	boolean	Specifies to show the line in the selected state.

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.
isSelected (optional)	boolean	Specifies to show the path in the selected state.

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.
isSelected (optional)	boolean	Specifies to show the rectangle in the selected state.
borderRadius (optional)	number	Specifies the radius to apply border radius to rectangle.

Returns boolean

drawRedact

Draw a redaction on an image.

Parameter	Type	Description
type (optional)	RedactType	– Optional. Specifies the type of redaction to be drawn on the image such as blur or pixelate. If not specified, the redaction drawing is initiated with the default blur value.
x (optional)	number	– Optional. Specifies x-coordinate of redaction. If not specified, the redaction drawing is initiated with the first parameter.
y (optional)	number	– Optional. Specifies y-coordinate of redaction. If not specified it draws redaction from the center point of the image.
width (optional)	number	– Optional. Specifies the width of the redaction. The default value is 100.
height (optional)	number	– Optional. Specifies the height of the redaction. The default value is 50.
value (optional)	number	– Optional. Specifies the blur value for blur-type redaction or the pixel size for pixelate-type redaction. Defaults to 20 since the default redaction is blur.

Returns boolean

drawText

Draw a text on an image.

  <div style='height: 500px;'>
    <ejs-imageeditor id="image-editor" (created)="created()"></ejs-imageeditor>
  </div>

  import { Component, ViewEncapsulation } from '@angular/core';
  import { ImageEditorComponent } from '@syncfusion/ej2-angular-image-editor';

  @Component({
    selector: 'app-root',
    styleUrls: ['app.component.css'],
    templateUrl: 'app.component.html',
    encapsulation: ViewEncapsulation.None
  })
  export class AppComponent {
    public created = (): void => {
        const imageObj: ImageEditorComponent = getComponent(document.getElementById('image-editor'), 'image-editor');
        this.imageObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        let dimension: any = this.imageEditorObj.getImageDimension();
        this.imageObj.drawText(dimension.x, dimension.y, 'Syncfusion', 'Arial', 12, true, true, '#000');
    }
  }

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.
isSelected (optional)	boolean	Specifies to show the text in the selected state.
degree (optional)	number	Specifies the degree to rotate the text.
fillColor (optional)	string	Specifies the background Color of the text.
strokeColor (optional)	string	Specifies the outline color of the text annotation.
strokeWidth (optional)	number	Specifies the outline stroke width of the text annotation.
transformCollection (optional)	TransformationCollection[]	Specifies the transform collection of the text annotation.
underline (optional)	boolean	Specifies whether the text should be underlined.
strikethrough (optional)	boolean	Specifies whether the text should have a strikethrough.

Returns boolean

enableShapeDrawing

Enable or disable a shape drawing option in an Image Editor.

Parameter	Type	Description
shapeType	ShapeType	Specifies the type of shape to be enabled or disabled for drawing.
isEnabled	boolean	Optional. Specifies a value to indicate whether to enable or disable shape drawing. The default value is true.

Returns void

enableTextEditing

Enable text area editing in the ImageEditor.

Returns void

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
imageQuality (optional)	number	– Specifies the quality of an image to be saved. The default value is “1” which represents the original size of the image if not specified.

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.

  <div style='height: 500px;'>
    <ejs-imageeditor id="image-editor" (created)="created()"></ejs-imageeditor>
  </div>

  import { Component, ViewEncapsulation } from '@angular/core';
  import { ImageEditorComponent } from '@syncfusion/ej2-angular-image-editor';

  @Component({
    selector: 'app-root',
    styleUrls: ['app.component.css'],
    templateUrl: 'app.component.html',
    encapsulation: ViewEncapsulation.None
  })
  export class AppComponent {
    public created = (): void => {
        const imageObj: ImageEditorComponent = getComponent(document.getElementById('image-editor'), 'image-editor');
        this.imageObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        this.imageObj.zoom(40, {x: 400, y: 400});
    }
  }

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

getImageFilter

Update filter to the canvas in the ImageEditor.

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

Returns string

getRedacts

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

Returns RedactSettings[]

getShapeSetting

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

  <div style='height: 500px;'>
    <ejs-imageeditor id="image-editor" (created)="created()"></ejs-imageeditor>
  </div>

  import { Component, ViewEncapsulation } from '@angular/core';
  import { ImageEditorComponent } from '@syncfusion/ej2-angular-image-editor';

  @Component({
    selector: 'app-root',
    styleUrls: ['app.component.css'],
    templateUrl: 'app.component.html',
    encapsulation: ViewEncapsulation.None
  })
  export class AppComponent {
    public created = (): void => {
        const imageObj: ImageEditorComponent = getComponent(document.getElementById('image-editor'), 'image-editor');
        this.imageObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        let dimension: any = this.imageEditorObj.getImageDimension();
        this.imageObj.drawEllipse(dimension.x, dimension.y, 40, 60);
        this.imageObj.drawEllipse(dimension.x, dimension.y+80, 40, 130);
        let shape: ShapeSettings = imageObj.getShapeSetting('shape_1');
        console.log(shape.type);
    }
  }

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.

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.
x (optional)	number	Optional, Specifies a value to pan the image horizontally.
y (optional)	number	Optional, Specifies a value to pan the image vertically.

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.

  <div style='height: 500px;'>
    <ejs-imageeditor id="image-editor" (created)="created()"></ejs-imageeditor>
  </div>

  import { Component, ViewEncapsulation } from '@angular/core';
  import { ImageEditorComponent } from '@syncfusion/ej2-angular-image-editor';

  @Component({
    selector: 'app-root',
    styleUrls: ['app.component.css'],
    templateUrl: 'app.component.html',
    encapsulation: ViewEncapsulation.None
  })
  export class AppComponent {
    public created = (): void => {
        const imageObj: ImageEditorComponent = getComponent(document.getElementById('image-editor'), 'image-editor');
        this.imageObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        this.imageObj.rotate(90);
    }
  }

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.

  <div style='height: 500px;'>
    <ejs-imageeditor id="image-editor" (created)="created()"></ejs-imageeditor>
  </div>

  import { Component, ViewEncapsulation } from '@angular/core';
  import { ImageEditorComponent } from '@syncfusion/ej2-angular-image-editor';

  @Component({
    selector: 'app-root',
    styleUrls: ['app.component.css'],
    templateUrl: 'app.component.html',
    encapsulation: ViewEncapsulation.None
  })
  export class AppComponent {
    public created = (): void => {
        const imageObj: ImageEditorComponent = getComponent(document.getElementById('image-editor'), 'image-editor');
        this.imageObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        this.imageObj.select('16:9', 10, 10);
    }
  }

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

selectRedact

Select a redaction based on the given redaction id.
Use ‘getRedacts’ 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 redact on an image.

Returns boolean

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;'>
    <ejs-imageeditor id="image-editor" (created)="created()"></ejs-imageeditor>
  </div>

  import { Component, ViewEncapsulation } from '@angular/core';
  import { ImageEditorComponent } from '@syncfusion/ej2-angular-image-editor';

  @Component({
    selector: 'app-root',
    styleUrls: ['app.component.css'],
    templateUrl: 'app.component.html',
    encapsulation: ViewEncapsulation.None
  })
  export class AppComponent {
    public created = (): void => {
        const imageObj: ImageEditorComponent = getComponent(document.getElementById('image-editor'), 'image-editor');
        this.imageObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        let dimension: any = this.imageEditorObj.getImageDimension();
        this.imageObj.drawEllipse(dimension.x, dimension.y, 40, 60);
        this.imageObj.drawEllipse(dimension.x, dimension.y+80, 40, 130);
        this.imageObj.selectShape('shape_1');
    }
  }

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

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

Returns boolean

sendBackward

Moves a shape to behind one shape based on the given shape id.
Use ‘getShapeSettings’ method to get the shape id which is then passed to perform moving.

Parameter	Type	Description
shapeId	string	Specifies the shape id to move the shape on an image.

Returns void

sendToBack

Moves a shape to behind all other shapes based on the given shape id.
Use ‘getShapeSettings’ method to get the shape id which is then passed to perform moving.

Parameter	Type	Description
shapeId	string	Specifies the shape id to move the shape on an image.

Returns void

straightenImage

Straightens an image by rotating it clockwise or counterclockwise.

Parameter	Type	Description
degree	number	The degree value specifying the amount of rotation for straightening the image. Positive values indicate clockwise rotation, while negative values indicate counterclockwise rotation.

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

updateRedact

This method is used to update the existing redacts by changing its height, width, blur, and pixel size in the component.
Use ‘getRedacts’ method to get the redacts which is then passed to change the options of a redacts.

Parameter	Type	Description
setting	RedactSettings	Specifies the redact settings to be updated for the shape on an image.
isSelected (optional)	boolean	Specifies to show the redacts in the selected state.

Returns boolean

updateShape

This method is used to update the existing shapes by changing its height, width, color, and font styles in the component.
Use ‘getShapeSettings’ method to get the shape which is then passed to change the options of a shape.

Parameter	Type	Description
setting	ShapeSettings	Specifies the shape settings to be updated for the shape on an image.
isSelected (optional)	boolean	Specifies to show the shape in the selected state.

Returns boolean

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.

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

```html