Selection cropping in the React Image Editor component
20 Sep 202424 minutes to read
The cropping feature in the Image Editor allows you to select and crop specific regions of an image. It offers different selection options, including custom shapes, squares, circles, and various aspect ratios such as 2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 5:7, 7:5, 9:16, and 16:9.
To perform a selection, you can use the select method, which allows you to define the desired selection area within the image. Once the selection is made, you can then use the crop method to crop the image based on the selected region. This enables you to extract and focus on specific parts of the image while discarding the rest.
Insert custom / square / circle region
The select method allows to perform selection based on the type of selection. Here, the select method is used to perform the selection as custom, circle, or square. The selection region can also be customized using the select method based on the parameters below.
-
type - Specify the type of selection
-
startX - Specify the x-coordinate of the selection region’s starting point
-
startY - Specify the y-coordinate of the selection region’s starting point
-
width - Specify the width of the selection region
-
height - Specify the height of the selection region
Here is an example of square selection using the select method.
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.select("Square");
}
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.select("Square");
}
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>Insert selection based on aspect ratio
The select method is used to perform the selection with the various aspect ratios such as 2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 5:7, 7:5, 9:16, and 16:9. The selection region can also be customized using the select method based on the parameters below.
-
type - Specify the type of selection
-
startX - Specify the x-coordinate of the selection region’s starting point
-
startY - Specify the y-coordinate of the selection region’s starting point
Here is an example of ratio selection using the select method.
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.select("16:9");
}
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.select("16:9");
}
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>Crop an image
The crop method allows cropping based on the selected region. Here is an example of cropping the selection region using the crop method.
Here is an example of circle cropping using the select and crop method.
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.select("Square");
this.imgObj.crop();
}
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.select("Square");
imgObj.crop();
}
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>Maintaining Original Image Size During Cropping
In the image editor, when an image is cropped, it is usually enlarged or scaled to improve visibility within the user interface. If you want to prevent this scaling and maintain the original cropping size, you can bind to the ‘cropping’ event and set the preventScaling value to true. This not only keeps the image size consistent during cropping but also ensures that the saved image retains its original cropping size without being enlarged.
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');
}
}
preventScalling(args) {
args.preventScaling = true;
}
render() {
return (<div className='e-img-editor-sample'>
<ImageEditorComponent ref={(img) => { this.imgObj = img; }} created={this.imageEditorCreated.bind(this)} cropping={this.preventScalling.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('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png');
} else {
imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png');
}
}
function preventScalling(args: any) {
args.preventScaling = true;
}
return (
<div className='e-img-editor-sample'>
<ImageEditorComponent ref={(img) => { imgObj = img }} created={imageEditorCreated} cropping={preventScalling} >
</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>Locking Selection Area During Cropping
When selecting an area for cropping, users can typically resize the selection from all corners and edges. If you want to prevent the selectionChanging event. Check if the action is resize, and if it is, set previousSelectionSettings value to currentSelectionSettings value. This will lock the selection area, preventing any adjustments to its size.
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');
}
}
selectionChanging(args) {
if (args.action == "resize") {
args.currentSelectionSettings = args.previousSelectionSettings;
}
}
render() {
return (<div className='e-img-editor-sample'>
<ImageEditorComponent ref={(img) => { this.imgObj = img; }} height="350px" created={this.imageEditorCreated.bind(this)} selectionChanging={this.selectionChanging.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');
}
}
function selectionChanging(args: any): void {
if (args.action == "resize") {
args.currentSelectionSettings = args.previousSelectionSettings;
}
}
return (
<div className='e-img-editor-sample'>
<ImageEditorComponent ref={(img) => { imgObj = img }} created={imageEditorCreated} selectionChanging={selectionChanging} >
</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>Cropping with Custom Ratio Selection
Users can perform cropping either through the toolbar or by using our public methods. While predefined ratio selections are available in the toolbar, users can also crop with custom ratios using our public method, select. Regardless of the ratio type used, the selection will adhere to the specified ratio, even when resizing the selection area.
import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Browser, getComponent } 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');
}
}
selectionChanging(args) {
if (args.action === "insert" && args.currentSelectionSettings.type === "Custom") {
args.currentSelectionSettings.height = 200;
args.currentSelectionSettings.width = 200;
}
}
render() {
return (<div className='e-img-editor-sample'>
<ImageEditorComponent ref={(img) => { this.imgObj = img; }} height="350px" created={this.imageEditorCreated.bind(this)} selectionChanging={this.selectionChanging.bind(this)}>
</ImageEditorComponent>
</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, getComponent } 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('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png');
} else {
imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png');
}
}
function selectionChanging(args: any): void {
if (args.action === "insert" && args.currentSelectionSettings.type === "Custom") {
args.currentSelectionSettings.height = 200;
args.currentSelectionSettings.width = 200;
}
}
return (
<div className='e-img-editor-sample'>
<ImageEditorComponent ref={(img) => { imgObj = img }} created={imageEditorCreated} selectionChanging={selectionChanging}>
</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>Cropping event
The cropping event is triggered when performing cropping on the image. This event is passed an object that contains information about the cropping event, such as the start and end point of the selection region. And this event uses CropEventArgs to handle the cropping action in the image.
The parameter available in the cropping event is,
CroppingEventArgs.startPoint – The x and y coordinates of a start point as ImageEditorPoint of the selection region.
CroppingEventArgs.endPoint - The x and y coordinates of an end point as ImageEditorPoint of the selection region.
CroppingEventArgs.cancel - To cancel the cropping action.