- Insert custom / square / circle region
- Insert selection based on aspect ratio
- Resize selections
- Crop an image
- Cropping event
Contact Support
Selection cropping in the Blazor Image Editor Component
14 Dec 20246 minutes to read
The cropping feature in the Blazor 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 SelectAsync
method, which allows you to define the desired selection area within the image. Once the selection is made, you can then use the CropAsync
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 SelectAsync
method allows to perform selection based on the type of selection. Here, the SelectAsync
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 SelectAsync
method.
@using Syncfusion.Blazor.ImageEditor
@using Syncfusion.Blazor.Buttons
<div style="padding-bottom: 15px">
<SfButton OnClick="SelectAsync">Select</SfButton>
</div>
<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="400">
<ImageEditorEvents Created="OpenAsync"></ImageEditorEvents>
</SfImageEditor>
@code {
SfImageEditor ImageEditor;
private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>() { };
private async void OpenAsync()
{
await ImageEditor.OpenAsync("nature.png");
}
private async void SelectAsync()
{
await ImageEditor.SelectAsync("Square");
}
}
Insert selection based on aspect ratio
The SelectAsync
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 SelectAsync
method.
@using Syncfusion.Blazor.ImageEditor
@using Syncfusion.Blazor.Buttons
<div style="padding-bottom: 15px">
<SfButton OnClick="SelectAsync">Select</SfButton>
</div>
<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="400">
<ImageEditorEvents Created="OpenAsync"></ImageEditorEvents>
</SfImageEditor>
@code {
SfImageEditor ImageEditor;
private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>() { };
private async void OpenAsync()
{
await ImageEditor.OpenAsync("nature.png");
}
private async void SelectAsync()
{
await ImageEditor.SelectAsync("16:9");
}
}
Resize selections
The selection region can be changed programmatically by using OnSelectionResizeStart
and OnSelectionResizeEnd
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 these events to customize the selection and it has the following parameters.
SelectionChangeEventArgs.Action - 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.
@using Syncfusion.Blazor.ImageEditor
<SfImageEditor @ref="ImageEditor" Height="400" Toolbar="customToolbarItem">
<ImageEditorEvents Created="OpenAsync" OnSelectionResizeStart="OnSelectionResizeStart"></ImageEditorEvents>
</SfImageEditor>
@code {
SfImageEditor ImageEditor;
private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>()
{
new ImageEditorToolbarItemModel { Name = "Crop" },
new ImageEditorToolbarItemModel { Name = "Reset" },
new ImageEditorToolbarItemModel { Name = "Confirm" }
};
private async void OpenAsync()
{
await ImageEditor.OpenAsync("nature.png");
}
private void OnSelectionResizeStart(SelectionChangeEventArgs args)
{
if (args.CurrentSelectionSettings.Type == "Custom")
{
args.CurrentSelectionSettings.Height = 200;
}
}
}
Crop an image
The CropAsync
method allows cropping based on the selected region. Here is an example of cropping the selection region using the CropAsync
method.
Here is an example of circle cropping using the SelectAsync
and CropAsync
method.
@using Syncfusion.Blazor.ImageEditor
@using Syncfusion.Blazor.Buttons
<div style="padding-bottom: 15px">
<SfButton OnClick="CropAsync">Crop</SfButton>
</div>
<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="400">
<ImageEditorEvents Created="OpenAsync"></ImageEditorEvents>
</SfImageEditor>
@code {
SfImageEditor ImageEditor;
private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>() { };
private async void OpenAsync()
{
await ImageEditor.OpenAsync("nature.png");
}
private async void CropAsync()
{
await ImageEditor.SelectAsync("Circle");
await ImageEditor.CropAsync();
}
}
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.
The parameter available in the Cropping
event is,
-
CropEventArgs.StartPoint – The x and y coordinates of a start point as
ImageEditorPoint
of the selection region. -
CropEventArgs.EndPoint - The x and y coordinates of an end point as
ImageEditorPoint
of the selection region. -
CropEventArgs.Cancel - To cancel the cropping action.
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.
@using Syncfusion.Blazor.ImageEditor
@using Syncfusion.Blazor.Buttons
<div style="padding-bottom: 15px">
<SfButton OnClick="CropAsync">Crop</SfButton>
</div>
<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="400">
<ImageEditorEvents Created="OpenAsync" Cropping="CroppingAsync"></ImageEditorEvents>
</SfImageEditor>
@code {
SfImageEditor ImageEditor;
private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>() { };
private async void OpenAsync()
{
await ImageEditor.OpenAsync("nature.png");
}
private async void CroppingAsync(CropEventArgs args)
{
args.preventScaling = true;
}
}