How to Crop an Image with Aspect Ratio in Blazor Image Editor?

2 mins read

This article demonstrates how to perform a two-step cropping operation using the Blazor Image Editor:

Step 1: Manual Crop – User selects and crops a custom region.
Step 2: Aspect Ratio Crop – The cropped image is reopened, a specific aspect ratio is applied programmatically, and the image is cropped again.

The final image is then retrieved and displayed outside the Image Editor component.

Step-by-Step Implementation

Step 1: Render the Image Editor

<SfImageEditor @ref="ImageEditor" Height="500" Toolbar="Toolbar">
    <ImageEditorEvents Created="Created" FileOpened="FileOpened"></ImageEditorEvents>
</SfImageEditor>

Step 2: Manual Crop
Use the CropAsync() method to crop the user-selected region manually.

await ImageEditor.CropAsync();

Step 3: Retrieve Cropped Image and Reopen
Use GetImageDataUrlAsync() to get the cropped image as a Base64 string, then reopen it using OpenAsync().

var croppedImageBase64 = await ImageEditor.GetImageDataUrlAsync();
await ImageEditor.OpenAsync(croppedImageBase64);
await Task.Delay(500); // Ensure image is fully loaded

Step 4: Apply Aspect Ratio Selection
Use SelectAsync() to apply a predefined aspect ratio (e.g., 149:21).

await ImageEditor.SelectAsync("149:21");

Step 5: Crop to Aspect Ratio
Use CropAsync() again to crop the image based on the selected aspect ratio.

// Step 6: Final crop with enforced aspect ratio
await ImageEditor.CropAsync();

Step 6: Retrieve and Display Final Image
Use GetImageDataUrlAsync() again to retrieve the final image and display it outside the editor.

var imageDataUrl = await ImageEditor.GetImageDataUrlAsync();
if (!string.IsNullOrEmpty(imageDataUrl))
{
   imageSrc = imageDataUrl;
   imageSaved = true;
   isImageEditorVisible = false;
   StateHasChanged(); // Refresh UI
}

Performance Tip

For large images, increase the buffer size in Program.cs:

builder.Services.AddServerSideBlazor().AddHubOptions(o => { o.MaximumReceiveMessageSize = 102400000; });  // Adjust size as needed

Output

Sample

Downloadable sample

Reference

Syncfusion Blazor Image Editor – Selection Cropping
Syncfusion Blazor Image Editor - Increase Buffer Size

Conclusion

I hope you enjoyed learning how to crop an image with aspect ratio in Blazor Image Editor.

You can refer to our Blazor Image Editor feature tour page to learn about its other groundbreaking feature representations. You can also explore our Documentation to understand how to present and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)