getCoordinates() returns out-of-bounds top and left values after rotation

[khalayli]

Thank you for the excellent library. We've encountered a critical issue where the getCoordinates() method returns invalid coordinate data when an image is rotated. Specifically, the top and left values can fall outside the bounds of the source image, making it impossible to calculate a correct final crop.

This bug appears to be isolated to the .getCoordinates() method. The visual output from .getCanvas() remains correct, which means the user sees the correct preview, but the underlying data for the final transformation is corrupted.

The Bug
When a significant rotation is applied (e.g., > 45 degrees), the top and left values returned by getCoordinates() seem to be calculated relative to a different, incorrect coordinate system, resulting in values that are larger than the source image's dimensions.

Example from our application:

An image with dimensions 9180x6372 is loaded.

The user rotates the image by 43°.

.getCoordinates() is called and returns { left: 8524, top: 5872, ... }.

The left and top values are clearly incorrect, as they are at the extreme bottom-right edge of the image, whereas the user's selection was in the center.

Live Reproduction
I have created a minimal CodeSandbox that reproduces this issue in isolation. You can see the bug in action by following these steps:

Open the CodeSandbox: react-advanced-cropper-rotation-bug

Rotate the image using the slider (e.g., to 87°).

Click the "Log Coordinates & Canvas" button.

Open the console and observe the logged objects.

You will see:

correctCanvasData: The Base64 string from .getCanvas() which, if rendered, shows the correct visual crop.

buggyCoordinates: The object from .getCoordinates(), which contains the out-of-bounds top and left values.

JavaScript

// Example console output from the CodeSandbox at 87° rotation:
{
"buggyCoordinates": {
"width": 1296.93,
"height": 899.99,
"left": 2197.58,
"top": 4241.68 // <-- IMPOSSIBLE! Image height is 4047.
},
"imageState": {
"width": 5831,
"height": 4047
}
}
This demonstrates conclusively that .getCoordinates() is not returning reliable data when rotation is applied, even though the visual canvas is correct.

Thank you for your time and consideration. We believe this is a critical bug for any application that relies on this library for generating final, high-resolution crops after rotation.