Transform in the React Image Editor component

21 Dec 202324 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 to rotate the image and its annotations by a specific number of degrees clockwise or anti-clockwise using rotate method. This method takes a single parameter: the angle of rotation in degrees. A positive value will rotate the image clockwise, while a negative value will rotate it anti-clockwise.

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

app.jsx
app.tsx
index.html
import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component {
    imgObj;
    imageEditorCreated() {
        if (Browser.isDevice) {
            this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png');
        }
        else {
            this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png');
        }
    }
    btnClick() {
        this.imgObj.rotate(90);
    }
    render() {
        return (<div className='e-img-editor-sample'>
                <ImageEditorComponent ref={(img) => { this.imgObj = img; }} created={this.imageEditorCreated.bind(this)} height="350px" toolbar = {[]}>
                </ImageEditorComponent>
                <div>
                    <ButtonComponent cssClass='e-primary' content='Click' onClick={this.btnClick.bind(this)}/>
                </div>
            </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('image-editor'));
import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    let imgObj: ImageEditorComponent;
    function imageEditorCreated(): void {
        if (Browser.isDevice) {
            imgObj.open('flower.png');
        } else {
            imgObj.open('bridge.png');
        }
    }
    function btnClick(): void {
        imgObj.rotate(90);
    }

    return (
        <div className='e-img-editor-sample'>
            <ImageEditorComponent ref={(img) => { imgObj = img }} created={imageEditorCreated} toolbar = {[]}>
            </ImageEditorComponent>
            <div>
                <ButtonComponent cssClass='e-primary' content='Click' onClick = {btnClick}/>
            </div>
        </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('image-editor'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Image Editor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-image-editor/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/material.css"rel="stylesheet">
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='image-editor'>
            <div id='loader'>Loading....</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 ImageEditorDirection, which specifies the direction in which the flip operation should be applied.

The Direction parameter accepts two values: ‘Horizontal’ and ‘Vertical’. When you choose ‘Horizontal’, the image and annotations will be flipped along the horizontal axis, resulting in a mirror effect. On the other hand, selecting ‘Vertical’ will flip them along the vertical axis, producing a vertical mirror effect.

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

app.jsx
app.tsx
index.html
import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component {
    imgObj;
    imageEditorCreated() {
        if (Browser.isDevice) {
            this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png');
        }
        else {
            this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png');
        }
    }
    btnClick() {
        this.imgObj.flip("Horizontal"); // Horizontal flip
    }
    render() {
        return (<div className='e-img-editor-sample'>
            <ImageEditorComponent ref={(img) => { this.imgObj = img; }} height="350px" created={this.imageEditorCreated.bind(this)} toolbar = {[]}>
            </ImageEditorComponent>
                <div>
                    <ButtonComponent cssClass='e-primary' content='Click' onClick={this.btnClick.bind(this)}/>
                </div>
            </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('image-editor'));
import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    let imgObj: ImageEditorComponent;
    function imageEditorCreated(): void {
        if (Browser.isDevice) {
            imgObj.open('flower.png');
        } else {
            imgObj.open('bridge.png');
        }
    }
    function btnClick(): void {
        imgObj.flip("Horizontal"); // Horizontal flip
    }

    return (
        <div className='e-img-editor-sample'>
        <ImageEditorComponent ref={(img) => { imgObj = img }} created={imageEditorCreated} toolbar = {[]}>
        </ImageEditorComponent>
            <div>
                <ButtonComponent cssClass='e-primary' content='Click' onClick = {btnClick}/>
            </div>
        </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('image-editor'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Image Editor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-image-editor/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/material.css"rel="stylesheet">
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='image-editor'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Straightening in the React Image Editor control

The straightening feature in an Image Editor allows users to adjust an image by rotating it clockwise or counter clockwise. The rotating degree value should be within the range of -45 to +45 degrees for accurate straightening. Positive values indicate clockwise rotation, while negative values indicate counter clockwise rotation.

Apply straightening to the image

The Image Editor control includes a straightenImage method, which allows you to adjust the degree of an image. This method takes one parameter that define how the straightening should be carried out:

degree: Specifies the amount of rotation for straightening the image. Positive values indicate clockwise rotation, while negative values indicate counterclockwise rotation.

Here is an example of straightening the image using the straightenImage method.

app.jsx
app.tsx
index.html
import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component {
    imgObj;
    imageEditorCreated() {
        if (Browser.isDevice) {
            this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png');
        }
        else {
            this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png');
        }
    }

    render() {
        return (<div className='e-img-editor-sample'>
                <ImageEditorComponent ref={(img) => { this.imgObj = img; }} height="350px" created={this.imageEditorCreated.bind(this)}></ImageEditorComponent>
            </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('image-editor'));
import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    let imgObj: ImageEditorComponent;
    function imageEditorCreated(): void {
        if (Browser.isDevice) {
            imgObj.open('flower.png');
        } else {
            imgObj.open('bridge.png');
        }
    }

    return (
        <div className='e-img-editor-sample'>
            <ImageEditorComponent ref={(img) => { imgObj = img }} created={imageEditorCreated}></ImageEditorComponent>
        </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('image-editor'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Image Editor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-image-editor/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/material.css"rel="stylesheet">
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='image-editor'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Zoom in or out an image

The Image Editor allows to magnify an image using the zoom method. This method allows one to zoom in and out of the image and provides a more detailed view of the image’s hidden areas. This method takes two parameters to perform zooming.

zoomFactor - Specifies a value to controlling the level of magnification applied to the image.
zoomPoint - Specifies x and y coordinates of a point as ImageEditorPoint on image to perform zooming.

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

app.jsx
app.tsx
index.html
import { ImageEditorComponent, ZoomSettingsModel } from '@syncfusion/ej2-react-image-editor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component {
    imgObj;
    zoomSettings = {maxZoomFactor: 30, minZoomFactor: 0.1};
    zoomLevel = 1;
    imageEditorCreated() {
        if (Browser.isDevice) {
            this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png');
        }
        else {
            this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png');
        }
    }
    zoomInClick() {
        if(zoomLevel < 1) {
            zoomLevel += 0.1;
        }else {
            zoomLevel += 1;
        }
        value = zoomSettings.maxZoomFactor;
        if (zoomLevel > value) {
            zoomLevel = value;
        }
        imgObj.zoom(zoomLevel); // Zoom in
    }
    zoomOutClick() {
        if(zoomLevel <= 1) {
            zoomLevel -= 0.1;
        }else {
            zoomLevel -= 1;
        }
        value = zoomSettings.minZoomFactor;
        if (zoomLevel < value) {
            zoomLevel = value;
        }
        imgObj.zoom(zoomLevel); // Zoom out
    }
    panClick() {
        this.imgObj.zoom(2); // Zoom in
        this.imgObj.pan(true);
    }
    render() {
        return (<div className='e-img-editor-sample'>
            <ImageEditorComponent ref={(img) => { this.imgObj = img; }} height="350px" created={this.imageEditorCreated.bind(this)} toolbar = {[]}>
            </ImageEditorComponent>
                <div>
                    <ButtonComponent cssClass='e-primary' content='Zoom In' onClick={this.zoomInClick.bind(this)}/>
                    <ButtonComponent cssClass='e-primary' content='Zoom Out' onClick={this.zoomOutClick.bind(this)}/>
                    <ButtonComponent cssClass='e-primary' content='PAn' onClick={this.panClick.bind(this)}/>
                </div>
            </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('image-editor'));
import { ImageEditorComponent, ZoomSettingsModel } from '@syncfusion/ej2-react-image-editor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    let imgObj: ImageEditorComponent;
    let zoomSettings: ZoomSettingsModel = {maxZoomFactor: 30, minZoomFactor: 0.1};
    let zoomLevel: number = 1;
    function imageEditorCreated(): void {
        if (Browser.isDevice) {
            imgObj.open('flower.png');
        } else {
            imgObj.open('bridge.png');
        }
    }
    function zoomInClick(): void {
        if(zoomLevel < 1) {
            zoomLevel += 0.1;
        }else {
            zoomLevel += 1;
        }
        const value: any = zoomSettings.maxZoomFactor;
        if (zoomLevel > value) {
            zoomLevel = value;
        }
        imgObj.zoom(zoomLevel); // Zoom in
    }
    function zoomOutClick(): void {
        if(zoomLevel <= 1) {
            zoomLevel -= 0.1;
        }else {
            zoomLevel -= 1;
        }
        const value: any = zoomSettings.minZoomFactor;
        if (zoomLevel < value) {
            zoomLevel = value;
        }
        imgObj.zoom(zoomLevel); // Zoom out
    }
    function panClick(): void {
        imgObj.zoom(2); // Zoom in
        imgObj.pan(true);
    }

    return (
        <div className='e-img-editor-sample'>
        <ImageEditorComponent ref={(img) => { imgObj = img }} created={imageEditorCreated} toolbar = {[]}>
        </ImageEditorComponent>
            <div>
                <ButtonComponent cssClass='e-primary' content='Zoom In' onClick = {zoomInClick}/>
                <ButtonComponent cssClass='e-primary' content='Zoom Out' onClick = {zoomOutClick}/>
                <ButtonComponent cssClass='e-primary' content='PAn' onClick = {panClick}/>
            </div>
        </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('image-editor'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Image Editor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-image-editor/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/material.css"rel="stylesheet">
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='image-editor'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Maximum and Minimum zoom level

The maxZoomFactor property is a useful feature in the Image Editor that 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 minZoomFactor value is set to 10, meaning that the image can be zoomed in up to 10 times its original size. This ensures that the zooming functionality remains within reasonable bounds and maintains the integrity of the image.

The maxZoomFactor 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 maxZoomFactor value is set to 0.1, meaning that the image can be zoomed out up to 10 times its original size.

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

app.jsx
app.tsx
index.html
import { ImageEditorComponent, ZoomSettingsModel } from '@syncfusion/ej2-react-image-editor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component {
    imgObj;
    zoomSettings = {maxZoomFactor: 30, minZoomFactor: 0.1};
    zoomLevel = 1;
    imageEditorCreated() {
        if (Browser.isDevice) {
            this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png');
        }
        else {
            this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png');
        }
    }
    zoomInClick() {
        if(zoomLevel < 1) {
            zoomLevel += 0.1;
        }else {
            zoomLevel += 1;
        }
        value = zoomSettings.maxZoomFactor;
        if (zoomLevel > value) {
            zoomLevel = value;
        }
        imgObj.zoom(zoomLevel); // Zoom in
    }
    zoomOutClick() {
        if(zoomLevel <= 1) {
            zoomLevel -= 0.1;
        }else {
            zoomLevel -= 1;
        }
        value = zoomSettings.minZoomFactor;
        if (zoomLevel < value) {
            zoomLevel = value;
        }
        imgObj.zoom(zoomLevel); // Zoom out
    }
    panClick() {
        this.imgObj.zoom(2); // Zoom in
        this.imgObj.pan(true);
    }
    render() {
        return (<div className='e-img-editor-sample'>
            <ImageEditorComponent ref={(img) => { this.imgObj = img; }} height="350px" created={this.imageEditorCreated.bind(this)} toolbar = {[]}>
            </ImageEditorComponent>
                <div>
                    <ButtonComponent cssClass='e-primary' content='Zoom In' onClick={this.zoomInClick.bind(this)}/>
                    <ButtonComponent cssClass='e-primary' content='Zoom Out' onClick={this.zoomOutClick.bind(this)}/>
                    <ButtonComponent cssClass='e-primary' content='PAn' onClick={this.panClick.bind(this)}/>
                </div>
            </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('image-editor'));
import { ImageEditorComponent, ZoomSettingsModel } from '@syncfusion/ej2-react-image-editor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    let imgObj: ImageEditorComponent;
    let zoomSettings: ZoomSettingsModel = {maxZoomFactor: 30, minZoomFactor: 0.1};
    let zoomLevel: number = 1;
    function imageEditorCreated(): void {
        if (Browser.isDevice) {
            imgObj.open('flower.png');
        } else {
            imgObj.open('bridge.png');
        }
    }
    function zoomInClick(): void {
        if(zoomLevel < 1) {
            zoomLevel += 0.1;
        }else {
            zoomLevel += 1;
        }
        const value: any = zoomSettings.maxZoomFactor;
        if (zoomLevel > value) {
            zoomLevel = value;
        }
        imgObj.zoom(zoomLevel); // Zoom in
    }
    function zoomOutClick(): void {
        if(zoomLevel <= 1) {
            zoomLevel -= 0.1;
        }else {
            zoomLevel -= 1;
        }
        const value: any = zoomSettings.minZoomFactor;
        if (zoomLevel < value) {
            zoomLevel = value;
        }
        imgObj.zoom(zoomLevel); // Zoom out
    }
    function panClick(): void {
        imgObj.zoom(2); // Zoom in
        imgObj.pan(true);
    }

    return (
        <div className='e-img-editor-sample'>
        <ImageEditorComponent ref={(img) => { imgObj = img }} created={imageEditorCreated} toolbar = {[]}>
        </ImageEditorComponent>
            <div>
                <ButtonComponent cssClass='e-primary' content='Zoom In' onClick = {zoomInClick}/>
                <ButtonComponent cssClass='e-primary' content='Zoom Out' onClick = {zoomOutClick}/>
                <ButtonComponent cssClass='e-primary' content='PAn' onClick = {panClick}/>
            </div>
        </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('image-editor'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Image Editor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-image-editor/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/material.css"rel="stylesheet">
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='image-editor'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Panning an image

The Image Editor allows 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. So, the panning is used to view the entire image, by clicking on the canvas and dragging it in the direction they want to move.

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

app.jsx
app.tsx
index.html
import { ImageEditorComponent, ZoomSettingsModel } from '@syncfusion/ej2-react-image-editor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component {
    imgObj;
    zoomSettings = {maxZoomFactor: 30, minZoomFactor: 0.1};
    zoomLevel = 1;
    imageEditorCreated() {
        if (Browser.isDevice) {
            this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png');
        }
        else {
            this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png');
        }
    }
    zoomInClick() {
        if(zoomLevel < 1) {
            zoomLevel += 0.1;
        }else {
            zoomLevel += 1;
        }
        value = zoomSettings.maxZoomFactor;
        if (zoomLevel > value) {
            zoomLevel = value;
        }
        imgObj.zoom(zoomLevel); // Zoom in
    }
    zoomOutClick() {
        if(zoomLevel <= 1) {
            zoomLevel -= 0.1;
        }else {
            zoomLevel -= 1;
        }
        value = zoomSettings.minZoomFactor;
        if (zoomLevel < value) {
            zoomLevel = value;
        }
        imgObj.zoom(zoomLevel); // Zoom out
    }
    panClick() {
        this.imgObj.zoom(2); // Zoom in
        this.imgObj.pan(true);
    }
    render() {
        return (<div className='e-img-editor-sample'>
            <ImageEditorComponent ref={(img) => { this.imgObj = img; }} height="350px" created={this.imageEditorCreated.bind(this)} toolbar = {[]}>
            </ImageEditorComponent>
                <div>
                    <ButtonComponent cssClass='e-primary' content='Zoom In' onClick={this.zoomInClick.bind(this)}/>
                    <ButtonComponent cssClass='e-primary' content='Zoom Out' onClick={this.zoomOutClick.bind(this)}/>
                    <ButtonComponent cssClass='e-primary' content='PAn' onClick={this.panClick.bind(this)}/>
                </div>
            </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('image-editor'));
import { ImageEditorComponent, ZoomSettingsModel } from '@syncfusion/ej2-react-image-editor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    let imgObj: ImageEditorComponent;
    let zoomSettings: ZoomSettingsModel = {maxZoomFactor: 30, minZoomFactor: 0.1};
    let zoomLevel: number = 1;
    function imageEditorCreated(): void {
        if (Browser.isDevice) {
            imgObj.open('flower.png');
        } else {
            imgObj.open('bridge.png');
        }
    }
    function zoomInClick(): void {
        if(zoomLevel < 1) {
            zoomLevel += 0.1;
        }else {
            zoomLevel += 1;
        }
        const value: any = zoomSettings.maxZoomFactor;
        if (zoomLevel > value) {
            zoomLevel = value;
        }
        imgObj.zoom(zoomLevel); // Zoom in
    }
    function zoomOutClick(): void {
        if(zoomLevel <= 1) {
            zoomLevel -= 0.1;
        }else {
            zoomLevel -= 1;
        }
        const value: any = zoomSettings.minZoomFactor;
        if (zoomLevel < value) {
            zoomLevel = value;
        }
        imgObj.zoom(zoomLevel); // Zoom out
    }
    function panClick(): void {
        imgObj.zoom(2); // Zoom in
        imgObj.pan(true);
    }

    return (
        <div className='e-img-editor-sample'>
        <ImageEditorComponent ref={(img) => { imgObj = img }} created={imageEditorCreated} toolbar = {[]}>
        </ImageEditorComponent>
            <div>
                <ButtonComponent cssClass='e-primary' content='Zoom In' onClick = {zoomInClick}/>
                <ButtonComponent cssClass='e-primary' content='Zoom Out' onClick = {zoomOutClick}/>
                <ButtonComponent cssClass='e-primary' content='PAn' onClick = {panClick}/>
            </div>
        </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('image-editor'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Image Editor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-image-editor/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/material.css"rel="stylesheet">
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='image-editor'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Panning event

The panning event is activated when the user begins dragging the image within the canvas. This event provide an opportunity to perform specific actions, like adjusting the position of an image, in response to the gesture of panning. And these event uses panEventArgs to handle the panning action when the user starts dragging the image.

The parameter available in the panEventArgs events are,

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 the boolean value to cancel the panning action.

Zooming event

The zooming event is triggered when performing zooming the image. This event can be used to perform certain actions, such as updating the position of the image. This event is passed an object that contains information about the zooming event, such as the amount of zooming performed. And this event uses ZoomEventArgs to handle the zooming action in the image.

The parameter available in the Zooming event is,

ZoomEventArgs.zoomPoint - The x and y coordinates as ImageEditorPoint 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 – Specify a boolean value to cancel the zooming action.
ZoomEventArgs.zoomTrigger - The type of zooming performed in the image editor.

Rotating event

The rotating event is triggered when performing rotating the image. This event is passed an object that contains information about the rotating event, such as the amount of rotation performed. And this event uses RotateEventArgs to handle the rotating action in the image.

The parameter available in the Rotating event is,

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 to cancel the rotating action.

Flipping event

The flipping event is triggered when performing flipping the image. This event is passed an object that contains information about the flipping event, such as the amount of flip performed. And this event uses FlipEventArgs to handle the flipping action in the image.

The parameter available in the flipping event is,

FlipEventArgs.direction - The flip direction as ImageEditorDirection to be applied in the image editor.
FlipEventArgs.cancel - Specifies a boolean value to cancel the flip action.