Crop support in SfImageEditor

21 Jul 20213 minutes to read

An image can be cropped using toolbar and programmatically.

Toolbar cropping

To crop an image, click the Crop icon in the toolbar. Cropping handles will be added on the image. You can resize the handles to crop the required portion.

By clicking the Crop icon, sub toolbar will be displayed below the main toolbar. After selecting the cropping portion, click OK in the sub toolbar to crop that selected portion.

The sub toolbar contains the following the icons:

  • Width - Specifies the width of the cropping area.
  • Height - Specifies the height of the cropping area.
  • OK - Crops the selected portion when clicking OK.
  • Cancel - Removes the cropping handles when clicking Cancel.


On specifying width and height, cropping area is located from the left-top corner.

You can also perform continuous cropping on an image.

The following screenshot illustrates the area selected for cropping.

Selected crop area

The following screenshot illustrates the image taken after performing cropping on the selected area.

Cropped image

An image can be cropped in rectangle and circle format. By default, rectangle format is enabled in the toolbar and you can also enable the circle format by using the drop-down button in crop icon.

Circle cropping toolbar image

Programmatic cropping

Cropping can be done programmatically using the following two methods in image editor:

Toggle cropping

ToggleCropping method selects the cropping area based on the specified parameters.

Crop area selection

The following method selects the full image area for cropping, and you can resize the image as needed.


The following method gets the ratio as the parameter to select the cropping area.


Ratio cropping

The following method gets the rect in terms of percentage to select the cropping area.

Rect rect = new Rect(20, 20, 50, 50);

Rect cropping

Circle cropping

Specify the ToggleCropping optional parameter is true as shown in the following code sample to enable the circle or elliptical format.

editor.ToggleCropping(new Rect(25, 25, 50, 50), true);

Circle cropping

Circle cropping with a ratio

To crop an image in a circle or an ellipse with a specific ratio, use ToggleCropping with a ratio argument and an optional parameter of true, which specifies whether the cropping panel should be added in an elliptical or rectangle shape. The default value is false.

editor.ToggleCropping(1, 1, true);

Circle cropping


After selecting the crop area, use the crop method in the image editor to crop the selected portion as demonstrated in the following method.

editor.Crop(new Rect(0, 0, 0, 0)

Manual cropping

To manually select and crop the location, use the same Crop method, but specify the portion to be cropped in terms of rect as in the following code.

editor.Crop(new Rect(0, 0, 0, 0)

Manual cropping

See also

How to crop an image based on the ratio in the image editor