Transform in EJ2 TypeScript Image Editor

4 Sep 202624 minutes to read

The Image Editor provides a range of transformation options for manipulating both the image and its annotations. These options include rotation, flipping, zooming, and panning. These transformations offer flexibility in adjusting the image and enhancing its visual appearance.

Rotate an image

The Image Editor allows you to rotate the image and its annotations by a specific number of degrees clockwise or anticlockwise using the rotate method. This method takes a single parameter: the angle of rotation in degrees. A positive value rotates the image clockwise, while a negative value rotates it anticlockwise. The method returns void.

Note: It is recommended to pass values in multiples of 90° (e.g., 90, 180, -90) for proper rotation alignment.

Here is an example of rotating an image in a button click event.

In the following example, the rotate method is used to rotate the image.

import { ImageEditor } from '@syncfusion/ej2-image-editor';
import { Button } from '@syncfusion/ej2-buttons';
import { Browser } from '@syncfusion/ej2-base';

//Image Editor items definition

let imageEditorObj: ImageEditor = new ImageEditor({
    width: '550px',
    height: '330px',
    toolbar: [],
    created: () => {
        if (Browser.isDevice) {
            imageEditorObj.open('bee-eater.png');
        } else {
            imageEditorObj.open('bee-eater.png');
        }
    }
});
imageEditorObj.appendTo('#imageeditor');

new Button({cssClass: `e-primary`, content:'Rotate'}, '#btnClick');
(document.getElementById('btnClick') as HTMLElement).onclick = function () {
    imageEditorObj.rotate(90);
};
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-image-editor/styles/material.css" rel="stylesheet" />


    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="control-section">
            <div id="imageeditor" class="row">
            </div>
            <div> 
                <button id='btnClick' class='e-btn e-primary'></button>
            </div>
        </div>
    </div>
</body>

</html>

Flip an image

The Image Editor provides the flip method, which allows you to flip both the image and its annotations either horizontally or vertically. This method takes a single parameter of type Direction, which specifies the direction in which the flip operation should be applied. The method returns void.

The Direction parameter accepts two values: Horizontal and Vertical. When you choose Horizontal, the image and annotations are flipped along the horizontal axis, resulting in a mirror effect. Selecting Vertical flips them along the vertical axis, producing a vertical mirror effect.

Here is an example of flipping an image in a button click event.

In the following example, the flip method is used to flip the image.

import { ImageEditor } from '@syncfusion/ej2-image-editor';
import { Button } from '@syncfusion/ej2-buttons';
import { Browser } from '@syncfusion/ej2-base';

//Image Editor items definition

let imageEditorObj: ImageEditor = new ImageEditor({
    width: '550px',
    height: '330px',
    toolbar: [],
    created: () => {
        if (Browser.isDevice) {
            imageEditorObj.open('bee-eater.png');
        } else {
            imageEditorObj.open('bee-eater.png');
            }
        }
});
imageEditorObj.appendTo('#imageeditor');

new Button({cssClass: `e-primary`, content:'Horizontal Flip'}, '#btnClick');
(document.getElementById('btnClick') as HTMLElement).onclick = function () {
    imageEditorObj.flip("Horizontal"); // Horizontal flip
};
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-image-editor/styles/material.css" rel="stylesheet" />


    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="control-section">
            <div id="imageeditor" class="row">
            </div>
            <div> 
                <button id='btnClick' class='e-btn e-primary' ></button>
            </div>
        </div>
    </div>
</body>

</html>

Straighten an image

The straightening feature in the Image Editor allows users to adjust an image by rotating it clockwise or counterclockwise. The rotation degree value should be within the range of -45 to +45 degrees for accurate straightening. Positive values indicate clockwise rotation, while negative values indicate counterclockwise rotation. The Image Editor control includes a straightenImage method, which allows you to adjust the degree of an image. This method takes one parameter that defines how the straightening is performed. The method returns void.

  • degree - Specifies the amount of rotation (in degrees) for straightening the image, in the range -45 to +45. Positive values indicate clockwise rotation, while negative values indicate counterclockwise rotation.

Here is an example of straightening the image.

import { ImageEditor } from '@syncfusion/ej2-image-editor';
import { Browser } from '@syncfusion/ej2-base';

//Image Editor items definition
let imageEditorObj: ImageEditor = new ImageEditor({
    width: '550px',
    height: '330px',
    toolbar: [],
    created: () => {
        if (Browser.isDevice) {
            imageEditorObj.open('bee-eater.png');
        } else {
            imageEditorObj.open('bee-eater.png');
        }
    }
});
imageEditorObj.appendTo('#imageeditor');

(document.getElementById('straightenImage') as HTMLElement).onclick = function () {
    imageEditorObj.straightenImage(45);
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-image-editor/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="control-section">
            <div id="imageeditor" class="row"></div>
            <div>
                <button id='straightenImage' class='e-btn e-primary'>Straighten Image</button>
            </div>
        </div>
    </div>
</body>

</html>

Zoom in or out of an image

The Image Editor allows you to magnify an image using the zoom method. This method lets you zoom in and out of the image and provides a more detailed view of its hidden areas. This method takes two parameters to perform zooming. The method returns void.

  • zoomFactor - Specifies a value (number) to control the level of magnification applied to the image.

  • zoomPoint - Specifies the x and y coordinates of a point as ImageEditorPoint on the image to perform zooming.

Minimum and maximum zoom level

The minZoomFactor property allows you to specify the minimum level of zoom that is allowed for an image. By setting this property, you can prevent the image from being zoomed out beyond a certain point, ensuring that it remains visible and usable even at the smallest zoom level.

By default, the minZoomFactor value is set to 0.1, meaning that the image can be reduced to 10% of its original size.

The maxZoomFactor property allows you to define the maximum level of zoom permitted for an image. This property sets a limit on how much the image can be magnified, preventing excessive zooming that may result in a loss of image quality or visibility.

By default, the maxZoomFactor value is set to 10, meaning that the image can be magnified to 10× its original dimensions. This ensures that the zooming functionality remains within reasonable bounds and maintains the integrity of the image.

Here is an example of specifying the minZoomFactor and maxZoomFactor properties in the zoomSettings options in an image editor.

import { ImageEditor, ZoomSettingsModel } from '@syncfusion/ej2-image-editor';
import { Browser } from '@syncfusion/ej2-base';

//Image Editor items definition
let imageEditorObj: ImageEditor = new ImageEditor({
    width: '550px',
    height: '330px',
    toolbar: [],
    zoomSettings: { minZoomFactor: 0.1, maxZoomFactor: 30 },
    zoomLevel: 1,
    created: () => {
        if (Browser.isDevice) {
            imageEditorObj.open('bee-eater.png');
        } else {
            imageEditorObj.open('bee-eater.png');
        }
    }
});
imageEditorObj.appendTo('#imageeditor');

(document.getElementById('zoomIn') as HTMLElement).onclick = function () {
    if (imageEditorObj.zoomLevel < 1) {
        imageEditorObj.zoomLevel += 0.1;
    }
    else {
        imageEditorObj.zoomLevel += 1;
    }
    if (imageEditorObj.zoomLevel > imageEditorObj.zoomSettings.maxZoomFactor) {
        imageEditorObj.zoomLevel = imageEditorObj.zoomSettings.maxZoomFactor;
    }
    imageEditorObj.zoom(imageEditorObj.zoomLevel); // Zoom in
};

(document.getElementById('zoomOut') as HTMLElement).onclick = function () {
    if (imageEditorObj.zoomLevel <= 1) {
        imageEditorObj.zoomLevel -= 0.1;
    }
    else {
        imageEditorObj.zoomLevel -= 1;
    }
    if (imageEditorObj.zoomLevel < imageEditorObj.zoomSettings.minZoomFactor) {
        imageEditorObj.zoomLevel = imageEditorObj.zoomSettings.minZoomFactor;
    }
    imageEditorObj.zoom(imageEditorObj.zoomLevel); // Zoom out
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-image-editor/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="control-section">
            <div id="imageeditor" class="row">
            </div>
            <div>
                <button id="zoomIn" class="e-btn e-primary">Zoom In</button>
                <button id="zoomOut" class="e-btn e-primary">Zoom Out</button>
            </div>
        </div>
    </div>
</body>

</html>

Panning an image

The Image Editor allows you to pan an image when the image exceeds the canvas size or selection range. When zooming in on an image or applying a selection for cropping, it is common for the image to exceed the size of the canvas or exceed the selection range. Panning is then used to view the entire image, by clicking on the canvas and dragging it in the direction you want to move.

In the following example, you can enable panning using the pan method in the button click event.

import { ImageEditor } from '@syncfusion/ej2-image-editor';
import { Button } from '@syncfusion/ej2-buttons';
import { Browser } from '@syncfusion/ej2-base';

//Image Editor items definition

let imageEditorObj: ImageEditor = new ImageEditor({
    width: '550px',
    height: '330px',
    toolbar: [],
    created: () => {
        if (Browser.isDevice) {
            imageEditorObj.open('bee-eater.png');
        } else {
            imageEditorObj.open('bee-eater.png');
        }
    }
});
imageEditorObj.appendTo('#imageeditor');

(document.getElementById('btnClick') as HTMLElement).onclick = function () {
    imageEditorObj.zoom(6); // Zoom in
    imageEditorObj.pan(true);
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-image-editor/styles/material.css" rel="stylesheet" />


    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="control-section">
            <div id="imageeditor" class="row">
            </div>
            <div> 
                <button id='btnClick' class='e-btn e-primary' >Pan</button>
            </div>
        </div>
    </div>
</body>

</html>

Panning event

The panning event is triggered when the user begins dragging the image within the canvas. The event argument provides an opportunity to perform actions in response to the panning gesture, using PanEventArgs to handle the panning action.

The PanEventArgs provides the following parameters:

  • PanEventArgs.startPoint - The x and y coordinates as ImageEditorPoint for the start point.

  • PanEventArgs.endpoint - The x and y coordinates as ImageEditorPoint for the end point.

  • PanEventArgs.cancel - Specifies a boolean value that, when set to true, cancels the panning action.

Zooming event

The zooming event is triggered when zooming the image. The event argument provides information about the zooming action, such as the amount of zooming performed, using ZoomEventArgs to handle the action.

The ZoomEventArgs provides the following parameters:

  • ZoomEventArgs.zoomPoint - The x and y coordinates as Point for the zoom point.

  • ZoomEventArgs.previousZoomFactor - The previous zoom factor applied in the image editor.

  • ZoomEventArgs.currentZoomFactor - The current zoom factor to be applied in the image editor.

  • ZoomEventArgs.cancel - Specifies a boolean value that, when set to true, cancels the zooming action.

  • ZoomEventArgs.zoomTrigger - The type of zooming performed in the image editor (e.g., mouse wheel, pinch, toolbar or keyboard).

Rotating event

The rotating event is triggered when rotating the image. The event argument provides information about the rotating action, such as the amount of rotation performed, using RotateEventArgs to handle the action.

The RotateEventArgs provides the following parameters:

  • RotateEventArgs.previousDegree - The degree of rotation before the recent rotation action was applied in the Image Editor.

  • RotateEventArgs.currentDegree - The current degree of rotation after the rotation action has been performed in the Image Editor.

  • RotateEventArgs.cancel - Specifies a boolean value that, when set to true, cancels the rotating action.

Flipping event

The flipping event is triggered when flipping the image. The event argument provides information about the flipping action, such as the direction of the flip performed, using FlipEventArgs to handle the action.

The FlipEventArgs provides the following parameters:

  • FlipEventArgs.direction - The flip direction as Direction to be applied in the image editor.

  • FlipEventArgs.cancel - Specifies a boolean value that, when set to true, cancels the flip action.