CropperBlazor
About the Draw a polygon when cropping
Hello,
I am writing some object detection on image loading via blazor WASM. Just want to know if we can use some other drawing functions like polygons, lines or arrows.. Kindly refer to the image or YT I recorded. thanks.
https://youtu.be/xOmG31Nv-Ew
Best regards, Albert Liu
Hi @AlbertLiu1974.
Sorry, in this library draw functions is absent. But, you can crop a polygon image
Sincerely, Maksym Hornytskiy
@AlbertLiu1974 Try to find some additional library for draw functionality, I did a quick search and found this: https://trevormare.github.io/STDoodle/help/doodledraw, maybe there is something else...
@AlbertLiu1974 Also, I know you can also use "fabric.js" for the drawing function, but you need to find a library for that or wrap the blazor interop module js library
Hi @AlbertLiu1974. New version of Cropper.Blazor will be realized which allows to use canvas or image reference in blazor to draw a polygon. New code was attached into dev branch.
You need to use GetCropperElementReference method to get reference into canvas or img and pass appropriate type for CropperComponentType parameter (default is img).
More info in api docs (some links can be broken for new types now, it will be fixed later): https://cropperblazor.github.io/api#properties
Just note for CropperComponentType.Canvas type requires manual uploading of images into canvas HTMl element, including error handling. You can use GetCropperElementReference to get canvas reference and use all power of canvas functionality!
Hi @AlbertLiu1974. A new version of Cropper.Blazor (1.3.4) has been released that supports the mentioned topics!
thanks a lot. I am restart to test it. look forward to working with cropper blazor. stay titght.
@AlbertLiu1974 you can see examples of implemention: https://cropperblazor.github.io/examples/cropping#crop-a-polygon-image, https://cropperblazor.github.io/examples/cropping#crop-a-round-image.
Additionally, a feature will be released soon that will not block the UI when retrieving cropped images, which is very useful for very large images.
@AlbertLiu1974 just example of using canvas for cropper component: https://cropperblazor.github.io/examples/cropperusage#canvas-cropper
You can use canvas reference (html canvas element) for drawing and so on, e.g project to integrate and use js interop api: https://github.com/TrevorMare/STDoodle