How to draw the cropped bounding box after cropping?

[AlbertLiu1974]

Hi All,

I want to record the bounding box and draw a red rectangle to save it for review purpose. Kindly refer to the image.

Not sure how to do it in blazor. Kindly help. I am using .net 8.1

Br, Albert

[MaxymGorn]

Hi @AlbertLiu1974. Unfortunately, Cropper.Blazor library don't support drawing functionality.

But, If you want to draw images in Blazor, you should to use canvas javascript functionality for that. You can try to use ready library for working with canvas in blazor: https://github.com/BlazorExtensions/Canvas. Definitely, you can another more advanced libraries if it requires or call drawing functions from canvas object reference.

You can get canvas element from cropped image using following example: https://cropperblazor.github.io/examples/cropping#advanced-usage

Example code:

// Get a reference to a JavaScript cropped canvas object.
        CroppedCanvas croppedCanvas = await cropperComponent!.GetCroppedCanvasAsync(getCroppedCanvasOptions);
        // Get reference canvas object when you have been cropping image.
        croppedCanvas!.JSRuntimeObjectRef

[AlbertLiu1974]

Hi @MaxymGorn Yes. I can crop the image so far and thanks for the CroppedCanvas and also I can get the bounding box coordinate as well from the OnCropEvent handle. Now It seems I can't combine the BlazorCanvas working with CropperComponent. I. only can create a separate page and summarize the cropped images in this page via Canvas. Or there is another way?

Best regards,
Albert Liu

[MaxymGorn]

Hi @AlbertLiu1974. Cropper js can work via canvas instead of img, but it requires small changes in library, because Cropper.Blazor library support only img rendering. I will roll out fix for that.

[AlbertLiu1974]

Hi @MaxymGorn , Thank you for the help. I think if there has a canvas back from Cropper.Blazor, will solve two my issues, 1. for drawing shapes. 2. for cropping via polygon(around the object)--> Hope I am right. Thanks a lot.

simple demo: https://youtu.be/ZMA7CQGMJAk

Best regards,
Albert Liu