Introducing the New Angular Image Editor Component
Tags: angular, ui, webdev, whatsnew
Published: 2022-11-11 13:38:05

---
title: Introducing the New Angular Image Editor Component
published: true
date: 2022-11-11 12:19:27 UTC
tags: angular, ui, webdev, whatsnew
canonical_url: https://www.syncfusion.com/blogs/post/introducing-the-new-angular-image-editor-component.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnj52095ivi7glwhtw0s.png
---

We are happy to introduce the new [Angular Image Editor ](https://www.syncfusion.com/angular-components/angular-image-editor "Angular Image Editor")component with our latest release, [2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "Essential Studio 2022 Volume 3 Main Release")!

Let’s explore its features and UI design!

## Image Editor overview

The Angular Image Editor is a graphical user interface for editing images. It provides built-in support to rotate, flip, zoom, and crop images. Users can insert annotations including text, freehand drawings, and shapes such as rectangles, ellipses, and lines. Also, the control supports keyboard interactions, events, and an optimized UI for touch gestures.

The following GIF image shows some of its features in action.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Angular-Image-Editor-Component-1.gif" alt="Angular Image Editor Component" style="width:100%">

  <figcaption>Angular Image Editor Component</figcaption>

</figure>

## Use cases

The Angular Image Editor is a great fit for the following applications:

- **Profile**  **pictures** : Crop any image and use it as your profile picture through the component’s user-friendly APIs. You can customize the Image Editor’s capabilities for this use by changing its toolbar or using external buttons.
- **Photo editor** : Use all the common image editing features built into the component’s toolbar. You can easily integrate the Image Editor into web or mobile applications to provide image editing capabilities.

## Key features

The following are the key features available in the Angular Image Editor component:

- [Load and save an image](#load-and-save-an-image).
- [Select and crop an image](#select-and-crop-an-image).
- [Transform an image](#transform-an-image).
- [Annotate an image](#annotations).
- [Zoom and pan an image](#zoom-and-pan-an-image).
- [Customize the toolbar](#toolbar-customization).
- [Responsive, touch-friendly UI](#adaptive-and-touch-friendly-ui).

Let’s see how these features work with code examples.

### <a name="load-and-save-an-image">Load and save an image</a>

The Image Editor component can open base64, image data, or hosted and online URL images using the  **open ** method. You can also open an image by clicking the **Open** button in the toolbar. The supported file types are PNG, JPEG, SVG, and base64.

Users can also edit images and save them as **ImageData** using the **getImageData** method. To save images in PNG, JPEG, and SVG formats, users can use the **export** method, which accepts file type and file name as parameters.

In the following code example, the **open** method is used to open a hosted image.

```xml
<div id="wrapperDiv" style="width:550px; height:350px;">
  <ejs-imageeditor (created)="created()" #ImageEditor [toolbar]='toolbarItems'></ejs-imageeditor>
</div>
 
export class AppComponent {
 @ViewChild('ImageEditor')
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = [];
 public created = (): void => {
  this.ImageEditorInstance.open("http://localhost:6969/image/bridge.png");
 }
}
```

The output of this code example is shown in the following image.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Viewing-an-Image-Using-Angular-Image-Editor.png" alt="Viewing an Image Using Angular Image Editor" style="width:100%">

  <figcaption>Viewing an Image Using Angular Image Editor</figcaption>

</figure>

**Note:** To view hosted images, you need to enable the **Directory Browsing** option in **IIS** , which creates a **web.config** file inside the hosted folder. Add the following code in the **web.config** file to resolve the CORS issue.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
 <system.webServer>
 <directoryBrowse enabled="true" />
  <httpProtocol>
   <customHeaders>
    <clear />
    <add name="Access-Control-Allow-Origin" value="*" />
   </customHeaders>
  </httpProtocol>
 </system.webServer>
</configuration>
```

### <a name="select-and-crop-an-image">Selection and cropping</a>

The Image Editor component supports multiple selection options including square, circle, and custom shapes. It can also handle various aspect ratios. You can crop an image by dragging and resizing the selection region. You can perform selection by either using the toolbar or the **select** method.

In the **select** method, we have to specify the selection type (custom, square, or circle) and aspect ratios (3:2, 4:3, 5:4, 7:5, or 16:9).

In the **toolbar** , we can perform selection by just clicking the **Crop** dropdown button and picking a selection shape (custom, square, or circle) and aspect ratio.

#### Cropping

The Angular Image Editor can crop any image based on a user-defined selection. The cropping can be made by either using the toolbar or the **crop** method.

In the **toolbar** , we can perform cropping by clicking the **OK ** button that is enabled after the user selects a part of the image.

In the following code example, we have used the **select** and **crop** methods to perform circular selection and crop the image.

```xml
<div>
 <div style="padding-bottom: 10px;">
  <button class="e-btn" (click)="select()">Select</button>
  <button class="e-btn" (click)="crop()">Crop</button>
 </div>
 <div id="wrapperDiv" style="width:550px; height:350px;">
  <ejs-imageeditor (created)="created()" #ImageEditor [toolbar]='toolbarItems'></ejs-imageeditor>
 </div>
</div>
export class AppComponent {
 @ViewChild('ImageEditor')
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = [];
 public created = (): void => {
  this.ImageEditorInstance.open("http://localhost:6969/image/bridge.png");
 }
 public select = (): void => {
  this.ImageEditorInstance.select('circle');
 }
 public crop = (): void => {
  this.ImageEditorInstance.crop();
 }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Cropping-an-Image-Using-Angular-Image-Editor.png" alt="Cropping an Image Using Angular Image Editor" style="width:100%">

  <figcaption>Cropping an Image Using Angular Image Editor</figcaption>

</figure>

### <a name="transform-an-image">Transform an image</a>

The Angular Image Editor component has  **rotate** and **flip** transformation support. The rotation transformation allows users to rotate an image clockwise or counterclockwise 90, 180, 270, or 360 degrees. The flip transformation supports horizontal and vertical orientations. We can perform both transformations by either using the toolbar or the rotate and flip methods.

In the **toolbar** , we can perform rotate and flip actions by clicking the **Transform** dropdown button and selecting one of the **Rotate Left** , **Rotate Right** , **Horizontal Flip** , or **Vertical Flip** options.

In the following code example, the **rotate** and **flip** methods are used to perform rotation and flip actions.

```xml
<div>
 <div style="padding-bottom: 10px;">
  <button class="e-btn" (click)="rotate()">Rotate</button>
  <button class="e-btn" (click)="flip()">Flip</button>
 </div>
 <div id="wrapperDiv" style="width:550px; height:350px;">
  <ejs-imageeditor (created)="created()" #ImageEditor [toolbar]='toolbarItems'></ejs-imageeditor>
 </div>
</div>
 
 
export class AppComponent {
 @ViewChild('ImageEditor')
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = [];
 public created = (): void => {
  this.ImageEditorInstance.open("http://localhost:6969/image/bridge.png");
 }
 public rotate = (): void => {
  this.ImageEditorInstance.rotate(90);
 }
 public flip = (): void => {
  this.ImageEditorInstance.flip("Vertical");
 }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Rotate-and-Flip-Options-in-Angular-Image-Editor.png" alt="Rotate and Flip Options in Angular Image Editor" style="width:100%">

  <figcaption>Rotate and Flip Options in Angular Image Editor</figcaption>

</figure>

### <a name="annotations">Annotations</a>

The Angular Image Editor component supports multiple types of annotations, including text, freehand drawings, and shapes such as rectangles, ellipses, and lines.

#### Text

You can insert a text annotation and customize it by changing its color, font family, font size, and font styles, such as bold and italic. You can add a text annotation by either using the toolbar or the **drawText** method.

In the **drawText** method, you can insert a text annotation by specifying the text, font family, font size, and font styles.

In the **toolbar,**  we can insert a text annotation by just clicking the **Annotation** dropdown button and picking the **Add Text** option. Once the text is inserted, the contextual toolbar will be enabled to customize the annotation’s color, font family, font size, and font styles, such as bold and italic.

#### Shapes

You can insert and customize the shape annotations such as rectangles, ellipses, and lines by changing their stroke color, fill color, and stroke width. Shape annotations can be made by either using the toolbar or the **drawRectangle** , **drawEllipse** , and **drawLine** methods.

In the **toolbar** , we can insert the shape annotations by clicking the **Annotation** dropdown button and picking either the **Rectangle**** , **** Ellipse ****,** or **Line** options. Once the shape is inserted, the contextual toolbar will be enabled to customize the annotation’s stroke color, fill color, and stroke width.

In the following code example, the **drawText** method is used to insert text, and the **drawRectangle**** , **** drawEllipse ****,** and **drawLine** methods are used to insert the respective annotation shapes.

```xml
<div>
 <div style="padding-bottom: 10px;">
  <button class="e-btn" (click)="text()">Add Text</button>
  <button class="e-btn" (click)="rectangle()">Rectangle</button>
  <button class="e-btn" (click)="ellipse()">Ellipse</button>
  <button class="e-btn" (click)="line()">Line</button>
 </div>
 <div id="wrapperDiv" style="width:550px; height:350px;">
  <ejs-imageeditor (created)="created()" #ImageEditor [toolbar]='toolbarItems'></ejs-imageeditor>
 </div>
</div>
 
export class AppComponent {
 @ViewChild('ImageEditor')
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = [];
 public created = (): void => {
  this.ImageEditorInstance.open("http://localhost:6969/image/bridge.png");
 }
 public text = (): void => {
  this.ImageEditorInstance.drawText(50, 50, 'Syncfusion');
 }
 public rectangle = (): void => {
  this.ImageEditorInstance.drawRectangle(50, 300);
 }
 public ellipse = (): void => {
  this.ImageEditorInstance.drawEllipse(1000, 300);
 }
 public line = (): void => {
  this.ImageEditorInstance.drawLine(1000, 150);
 }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Text-and-Shapes-Annotation-Feature-in-Angular-Image-Editor.png" alt="Text and Shapes Annotation Feature in Angular Image Editor" style="width:100%">

  <figcaption>Text and Shapes Annotation Feature in Angular Image Editor</figcaption>

</figure>


#### Freehand drawing

You can easily insert a freehand drawing annotation and customize it by changing its stroke color and stroke width. The freehand drawing annotation can be made by either using the toolbar or the **freehandDraw** method.

In the **toolbar** , you can insert the freehand draw annotation by clicking the **Annotation** dropdown button and picking the **Freehand Draw** option. Once the freehand draw option is enabled, the contextual toolbar will be enabled to customize the stroke color and width.

In the following code example, the **freehandDraw** method is used to toggle the freehand drawings.

```xml
<div>
 <div style=”padding-bottom: 10px;”>
  <button class=”e-btn” (click)=”freehanddraw()”>Freehand Draw</button>
 </div>
 <div id=”wrapperDiv” style=”width:550px; height:350px;”>
  <ejs-imageeditor (created)=”created()” #ImageEditor [toolbar]=’toolbarItems’></ejs-imageeditor>
 </div>
</div>
 
export class AppComponent {
 @ViewChild(‘ImageEditor’)
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = [];
 public created = (): void => {
  this.ImageEditorInstance.open(“http://localhost:6969/image/bridge.png”);
 }
 public freehanddraw = (): void => {
  this.ImageEditorInstance.freeHandDraw(true);
 }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Freehand-Drawing-Annotation-Feature-in-Angular-Image-Editor.png" alt="Freehand Drawing Annotation Feature in Angular Image Editor" style="width:100%">

  <figcaption>Freehand Drawing Annotation Feature in Angular Image Editor</figcaption>

</figure>


### <a name="zoom-and-pan-an-image">Zooming and panning an image</a>

The Angular Image Editor allows users to zoom and pan an image. You can perform zooming and panning by either using the toolbar or the **zoom and pan** method.

In the **toolbar** , we can perform zooming by clicking the **Zoom In**  **and**  **Zoom Out ** buttons, which enable the **Pan** option in the toolbar.

In the following code example, the **zoomIn**** , **** zoomOut ****,** and **pan** methods are used to perform zooming in, zooming out, and panning the image, respectively.

```xml
<div>
 <div style="padding-bottom: 10px;">
  <button class="e-btn" (click)="zoomIn()">Zoom In</button>
  <button class="e-btn" (click)="zoomOut()">Zoom Out</button>
  <button class="e-btn" (click)="pan()">Pan</button>
 </div>
 <div id="wrapperDiv" style="width:550px; height:350px;">
  <ejs-imageeditor (created)="created()" #ImageEditor [toolbar]='toolbarItems'></ejs-imageeditor>
 </div>
</div>
 
export class AppComponent {
 @ViewChild('ImageEditor')
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = [];
 public created = (): void => {
  this.ImageEditorInstance.open("http://localhost:6969/image/bridge.png");
 }
 public zoomIn = (): void => {
  this.ImageEditorInstance.zoom(0.1);
 }
 public zoomOut = (): void => {
  this.ImageEditorInstance.zoom(-0.1);
 }
 public pan = (): void => {
  this.ImageEditorInstance.pan(true);
 }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Zooming-and-Panning-Features-in-Angular-Image-Editor-1.gif" alt="Zooming and Panning Features in Angular Image Editor" style="width:100%">

  <figcaption>Zooming and Panning Features in Angular Image Editor</figcaption>

</figure>


### <a name="toolbar-customization">Toolbar customization</a>

You can customize the built-in toolbar using the **toolbar** property. A contextual toolbar is enabled while inserting annotations. You can also customize the toolbar by using the **toolbarUpdating** event.

In the following code example, the annotate option is only enabled with text, rectangle, and ellipse options using the **toolbar** property, and the contextual toolbar for the rectangle annotation is rendered with only stroke color by excluding fill color and stroke width using the **toolbarUpdating** event.

```xml
<div>
 <div id=”wrapperDiv” style=”width:550px; height:350px;”>
  <ejs-imageeditor (toolbarUpdating)=”toolbarUpdating($event)” (created)=”created()” #ImageEditor [toolbar]=’toolbarItems’></ejs-imageeditor>
 </div>
</div>
 
export class AppComponent {
 @ViewChild(‘ImageEditor’)
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = [‘Annotate’, ‘Text’, ‘Rectangle’, ‘Ellipse’];
 public created = (): void => {
  this.ImageEditorInstance.open(“http://localhost:6969/image/bridge.png”);
 }
 public toolbarUpdating = (args: ToolbarEventArgs): void => {
  if (args.toolbarType === ‘shapes’) {
   args.toolbarItems = [‘strokeColor’];
  }
 }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Customizing-the-Toolbar-in-Angular-Image-Editor.png" alt="Customizing the Toolbar in Angular Image Editor" style="width:100%">

  <figcaption>Customizing the Toolbar in Angular Image Editor</figcaption>

</figure>

#### Toolbar template

Also, users can replace the toolbar of the Image Editor with the user-specific UI using the **toolbarTemplate** property.

Refer to the following code example.

```xml
<div>
 <div id="wrapperDiv" style="width: 550px; height: 350px;">
  <ejs-imageeditor (created)="created()" #ImageEditor>
   <ng-template #toolbarTemplate let-data>
    <div style="padding: 10px; border-bottom: 1px solid darkgray;">
     <button class="e-btn" (click)="text()">Add Text</button>
     <button class="e-btn" (click)="rectangle()">Rectangle</button>
     <button class="e-btn" (click)="line()">Line</button>
    </div>
   </ng-template>
  </ejs-imageeditor>
 </div>
</div>
 
export class AppComponent {
 @ViewChild('ImageEditor')
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = ['Annotate', 'Text', 'Rectangle', 'Ellipse'];
 public created = (): void => {
  this.ImageEditorInstance.open("http://localhost:6969/image/bridge.png");
 }
 public text = (): void => {
  this.ImageEditorInstance.drawText(50, 50, 'Syncfusion');
 }
 public rectangle = (): void => {
  this.ImageEditorInstance.drawRectangle(50, 300);
 }
 public line = (): void => {
  this.ImageEditorInstance.drawLine(1000, 150);
 }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Customizing-the-Toolbar-with-the-Toolbar-Template-Option-in-Angular-Image-Editor.png" alt="Customizing the Toolbar with the Toolbar Template Option in Angular Image Editor" style="width:100%">

  <figcaption>Customizing the Toolbar with the Toolbar Template Option in Angular Image Editor</figcaption>

</figure>

### <a name="adaptive-and-touch-friendly-ui">Adaptive and touch-friendly UI</a>

By default, the Angular Image Editor adapts to all mobile devices based on the screen size. It is a touch-friendly component, so users can use their finger, a pen, or a mouse device on desktop and mobile devices to edit the image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Adaptive-and-Touch-Friendly-UI-in-Angular-Image-Editor.png" alt="Adaptive and Touch-Friendly UI in Angular Image Editor" style="width:100%">

  <figcaption>Adaptive and Touch-Friendly UI in Angular Image Editor</figcaption>

</figure>

## How to use it

We have a set of resources for you, including our [Angular Image Editor live demos](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/image-editor/default/ "Syncfusion Angular Image Editor live demo") and [documentation](https://ej2.syncfusion.com/angular/documentation/image-editor/getting-started/ "Getting started with Angular Image Editor Component Documentation") that explains our customization features.

## Conclusion

Thanks for reading! We hope you enjoyed this quick introduction to the design and features of our new [Angular Image Editor](https://www.syncfusion.com/angular-components/angular-image-editor "Angular Image Editor Component") component. If you would like to give it a try, please download the latest available version of Essential Studio, [2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "Essential Studio 2022 Volume 3 Main Release") . Experience wonderful image editing with this component and provide your valuable feedback in the comments section below.

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forums"), [support portal](https://support.syncfusion.com/?_gl=1*hmo0hl*_ga*MTc0OTQ0NjYwNi4xNjU3ODgyMjE1*_ga_WC4JKKPHH0*MTY2NzE4NjU0OC40MjcuMS4xNjY3MTg3MjE1LjAuMC4w "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2022 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-3-is-here.aspx "Blog: Syncfusion Essential Studio 2022 Volume 3 Is Here!")
- [What’s New in 2022 Volume 3: Essential JS 2](https://www.syncfusion.com/blogs/post/whats-new-in-2022-volume-3-essential-js-2.aspx "Blog: What’s New in 2022 Volume 3: Essential JS 2")
- [Top 7 Features of Angular 14](https://www.syncfusion.com/blogs/post/top-7-features-of-angular-14.aspx "Blog: Top 7 Features of Angular 14")
- [Angular Template Driven vs. Reactive Forms](https://www.syncfusion.com/blogs/post/angular-template-driven-vs-reactive-forms.aspx "Blog: Angular Template Driven vs. Reactive Forms")