Selection cropping in the EJ2 TypeScript Image Editor control
19 Dec 202314 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 { 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');
//Button click
let button: Button = new Button({cssClass: `e-primary`, content:'Click'}, '#btnClick');
document.getElementById('btnClick').onclick = (): void => {
imageEditorObj.select("Square");
}<!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/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></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' >Click</button>
</div>
</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 SelectAsync 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.
In the following example, the select method is used in the button click to the ratio selection.
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');
//Button click
let button: Button = new Button({cssClass: `e-primary`, content:'Click'}, '#btnClick');
document.getElementById('btnClick').onclick = (): void => {
imageEditorObj.select("16:9");
}<!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/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></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' >Click</button>
</div>
</div>
</div>
</body>
</html>Resize selections
The selection region can be changed programmatically by using selectionChanging event. This event is activated during resizing the selection using mouse, and it allows for alterations to the selection region by adjusting the specified properties.
The SelectionChangeEventArgs is used in this event to customize the selection and it has the following parameters.
SelectionChangeEventArgs.cction - The type of action such as inserting or resizing
SelectionChangeEventArgs.cancel - Specifies to cancel the selection.
SelectionChangeEventArgs.currentSelectionPoint - Represents all the details of the selection including its type, position, width, and height after the current action as CropSelectionSettings.
SelectionChangeEventArgs.previousSelectionPoint - Represents all the details of the selection including its type, position, width, and height before this current action as CropSelectionSettings
Here is an example of changing the selection region using the SelectionChangeEventArgs event.
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 { 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');
//Button click
let button: Button = new Button({cssClass: `e-primary`, content:'Click'}, '#btnClick');
document.getElementById('btnClick').onclick = (): void => {
imageEditorObj.select("Circle");
imageEditorObj.crop();
}<!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/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></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' >Click</button>
</div>
</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,