Selection cropping in the ASP.NET MVC Image Editor control
15 Dec 20239 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.
<div class="col-lg-12 control-section e-img-editor-sample">
@Html.EJS().ImageEditor("image-editor").Created("created").Toolbar(new string[] { }).Render()
</div>
@Html.EJS().Button("customClick").CssClass("e-primary").Content("Custom").Click("customClick").Render()
@Html.EJS().Button("squareClick").CssClass("e-primary").Content("Square").Click("squareClick").Render()
@Html.EJS().Button("circleClick").CssClass("e-primary").Content("Circle").Click("circleClick").Render()
<script>
function created() {
var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
if (ej.base.Browser.isDevice) {
imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/flower.png');
} else {
imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
}
}
function customClick() {
var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
imageEditorObj.select("Custom");
}
function squareClick() {
var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
imageEditorObj.select("Square");
}
function circleClick() {
var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
imageEditorObj.select("Circle");
}
</script>
<style>
.image-editor {
margin: 0 auto;
}
.e-img-editor-sample {
height: 80vh;
width: 100%;
}
@@media only screen and (max-width: 700px) {
.e-img-editor-sample {
height: 75vh;
width: 100%;
}
}
.control-wrapper {
height: 100%;
}
</style>
public ActionResult Default()
{
return View();
}
Output be like the below.
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.
<div class="col-lg-12 control-section e-img-editor-sample">
@Html.EJS().ImageEditor("image-editor").Created("created").Toolbar(new string[] { }).Render()
</div>
@Html.EJS().Button("btnClick").CssClass("e-primary").Content("Click").Click("clickHandler").Render()
<script>
function created() {
var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
if (ej.base.Browser.isDevice) {
imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/flower.png');
} else {
imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
}
}
function clickHandler() {
var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
imageEditorObj.select("16:9");
}
</script>
<style>
.image-editor {
margin: 0 auto;
}
.e-img-editor-sample {
height: 80vh;
width: 100%;
}
@@media only screen and (max-width: 700px) {
.e-img-editor-sample {
height: 75vh;
width: 100%;
}
}
.control-wrapper {
height: 100%;
}
</style>
public ActionResult Default()
{
return View();
}
Output be like the below.
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.
<div class="col-lg-12 control-section e-img-editor-sample">
@Html.EJS().ImageEditor("image-editor").Created("created").Toolbar(new string[] { }).Render()
</div>
@Html.EJS().Button("btnClick").CssClass("e-primary").Content("Click").Click("clickHandler").Render()
<script>
function created() {
var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
if (ej.base.Browser.isDevice) {
imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/flower.png');
} else {
imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
}
}
function clickHandler() {
var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
imageEditorObj.select("Circle");
imageEditorObj.crop();
}
</script>
<style>
.image-editor {
margin: 0 auto;
}
.e-img-editor-sample {
height: 80vh;
width: 100%;
}
@@media only screen and (max-width: 700px) {
.e-img-editor-sample {
height: 75vh;
width: 100%;
}
}
.control-wrapper {
height: 100%;
}
</style>
public ActionResult Default()
{
return View();
}
Output be like the below.
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.