Angular Image Editor - A Comprehensive Tool to Edit the Image

Overview

The Angular Image Editor component is a graphical user interface used for editing images. It provides built-in support to rotate, flip, zoom, and crop images based on the selection. It also has support for inserting annotations including rectangle, ellipse, line, text, and freehand drawings.

Selection and cropping

The Image Editor component has multiple selection options including square, circle, and can be customized to various aspect ratios. The selection region can be dragged and resized for cropping an image.

• Selection and cropping

Annotations

The Image Editor has multiple annotations support including text, freehand drawings, images, and shapes such as rectangle, ellipse, and line.

• Annotation documentation

Transform images

Rotate, flip, and zoom images with annotations.

• Transform images

Undo and redo

The Image Editor provides an option to undo and redo changes made to an image. The undo option helps reverse the last action performed and the redo option reverses the last undo action performed with the Image Editor.

Other supported frameworks

In addition to Angular, the Image Editor component is also available for the React, Vue, and JavaScript frameworks. You can access the component on these platforms using the links below.

• React Image Editor

• Vue Image Editor

• JavaScript Image Editor

Angular Image Editor Code Example

Easily get started with the Angular Image Editor using a few simple lines of HTML and TS code example as demonstrated below. Also explore our Angular Image Editor Example that shows you how to render and configure a Image Editor in Angular.

<div id="action-description">
  <p>This sample demonstrates Image Editor features such as crop, rotate, flip, insert shape and text.</p>
</div>

<div class="col-lg-12 control-section">
  <div class="e-img-editor-sample">
    <ejs-imageeditor id="image-editor" (created)="created()">
    </ejs-imageeditor>
  </div>
</div>

/**
 * Default Sample
 */
import { Component } from '@angular/core';
import { Browser, getComponent } from '@syncfusion/ej2-base';
import { ImageEditorComponent } from '@syncfusion/ej2-angular-image-editor';

@Component({
    selector: 'control-content',
    templateUrl: 'default.html',
    styleUrls: ['default.css']
})

export class DefaultImageEditorComponent {
    public created = (): void => {
        const imageEditor: ImageEditorComponent = getComponent(document.getElementById('image-editor'), 'image-editor');
        if (Browser.isDevice) {
            imageEditor.open('./assets/image-editor/images/flower.png');
        } else {
            imageEditor.open('./assets/image-editor/images/bridge.png');
        }
        imageEditor.theme = window.location.href.split('#')[1].split('/')[1];
    }
}