[V2] What is the best way possible to fit <cropper-selection> to take image height and image width?

[ramicbenjamin]

Hello,

thank you for maintaining this great library.

I have a question regarding setting <cropper-selection> to take image height and width.

I tried doing it by using $change method and setting it like $change(0, 0, cropperImage.$image.clientWidth, cropperImage.$image.clientHeight) and then calling $center method but for some reason clientWidth and clientHeight, as well as height and width and offsetHeight and offsetWidth are always returning actual image size, and not the size of the displayed image.

See the image below:

I would expect that one of these return 1074 and 716, so I can center it that way.

Am I doing this right, and is there a better way of doing this?

This is what I would expect to happen:

[fengyuanchen]

Do you see the transform: matrix() style on the image? In short, the image has been transformed (scaled).

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix

[fengyuanchen]

Do you see the transform: matrix() style on the image? In short, the image has been transformed (scaled).

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix

[fengyuanchen]

• The visual width of the image = image.clientWidth * (image's scaleX).
• The visual height of the image = image.clientWidth * (image's scaleY).

If the image itself has been rotated, it will be more difficult to calculate its visual dimensions.