How to do zoom using API's with Syncfusion Angular Image Editor

2 mins read

The Syncfusion Image Editor component provides a feature-rich set of tools for editing images within your web applications. One of the functionalities it offers is the ability to zoom in and out of images. This article will guide you through the process of implementing zoom functionality using the Image Editor’s API.

Prerequisites

Before you begin, ensure you have the following:

Syncfusion Essential JS 2 Image Editor package installed in your project.
Basic knowledge of Angular and TypeScript.

Step-by-Step Implementation

HTML Template Setup

First, set up your HTML template to include the Image Editor component with a custom toolbar and zoom settings. Also, add buttons for zooming in and out.

<ejs-imageeditor #imageEditor [toolbar]="customToolbar" [zoomSettings]="zoomSettings" (created)="created()"></ejs-imageeditor>
<button class="e-btn e-primary" (click)="zoomInClick()">Zoom In</button>
<button class="e-btn e-primary" (click)="zoomOutClick()">Zoom Out</button>

Initializing the Image Editor

In the created method, initialize the Image Editor with an image URL:

public created = (): void => {
   this.imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
}

Setting Up Zoom Parameters

Define the zoomSettings with maximum and minimum zoom factors. These settings will determine the minimum and maximum zoom levels allowed:

public zoomSettings: ZoomSettingsModel = {maxZoomFactor: 30, minZoomFactor: 0.1};

Implementing Zoom Functionality

The zoomInClick and zoomOutClick methods adjust the zoomLevel based on the current zoom level and the defined zoomSettings. The zoom method of the Image Editor component is then called with the new zoom level to perform the zoom action.

zoomInClick(): void {
    if(this.zoomLevel < 1) {
        this.zoomLevel += 0.1;
    } else {
        this.zoomLevel = this.zoomLevel + 1;
    }
    if(this.zoomLevel > this.imageEditorObj.zoomSettings.maxZoomFactor) {
        this.zoomLevel = this.imageEditorObj.zoomSettings.maxZoomFactor;
    }
    this.imageEditorObj.zoom(this.zoomLevel); // zoom in
}

zoomOutClick(): void {
    if(this.zoomLevel <= 1) {
        this.zoomLevel -= 0.1;
    } else {
        this.zoomLevel = this.zoomLevel - 1;
    }
    if(this.zoomLevel < this.imageEditorObj.zoomSettings.minZoomFactor) {
        this.zoomLevel = this.imageEditorObj.zoomSettings.minZoomFactor;
    }
    this.imageEditorObj.zoom(this.zoomLevel); // zoom out
}

Constraints

The zoom action is constrained between the minZoomFactor and maxZoomFactor values defined in the zoomSettings.
The zoomLevel is adjusted incrementally based on whether it is less than or equal to 1.
After adjusting the zoomLevel, it is applied to the Image Editor using the zoom method.

Live Demo

To see a live demonstration of the zoom functionality in action, visit the following sample link:

Syncfusion Image Editor Zoom Functionality - Live Demo

Additional References

For more information on the Syncfusion Image Editor component and its API, refer to the following resources:

By following these steps, you can successfully implement zoom in and zoom out functionality in the Syncfusion Image Editor component within your Angular application.

Did you find this information helpful?

Yes

Comments (0)