How to get the x, y, height, width coordinates of the selection relative to the underlying image?

[jbigler]

If I want to perform the actual crop dynamically on the backend, how can I obtain the coordinates of the selection in relation to the natural size of the image?

The migration guide says to:

Use the <cropper-image> element's $getTransform method, and the <cropper-selection> element's x, y, width, and height properties.

Is there an example of doing that? The selection properties are in relation to the canvas, but the matrix returned by $getTransform is not clear to me. How to use it to translate the selection? What is the reference point for calculating?

[jbigler]

I think that I was able to make some progress by using getBoundingClientRect() on the image and canvas elements to find the relative positions. I think it would be helpful to have a dedicated method for this on the selection element.

[fengyuanchen]

You can refer to the CropperSelection's Limit boundaries example.

[jbigler]

Thank you, and thanks for this great tool.

In all honesty, I think a few helper attributes and methods like limit-boundaries and $getCropData would make the library easier for others to adopt and use out of the box. But in the spirit of keeping the base library small, that could always be a project that uses this under the hood.