ReactCrop__crop-mask is not updating after rotating the image.

[rajputkamal]

Hi, Please find the below screenshots FYI.

In the above screenshots, after rotating the image, the crop mask is not updating in chrome and edge. In Firefox its working fine.
Can you please help on this.

[dominictobias]

The library only works for rotating the image within the rectangle like this in the demo:

For what you're trying to achieve It would be better to rotate the image and produce a new image and load that into ReactCrop as using CSS transforms will break all the calculations in the library

E.g. user wants to rotate to the right 90 degrees -> copy image to canvas -> rotate 90deg -> render that canvas or canvas.toBlob() + URL.createObjectURL(blob) and pass url into <img />

There might be cropping libraries which allow you to rotate how you're trying out the box too I'm not sure. It is orders of magnitude more complex to implement.

[rajputkamal]

My current approach.

1. I am getting the url of the image from an external source, eg: https://some_random_image.jpg/
2. This image url I have stored in the useState and the state I have passed to the src of image in React_crop.
3. Now, once user clicks in rotate button, on click of rotate, I am getting rotation degree as 90, 180, 270 and 0.
4. Once I have the rotation degree, I am passing the rotation to my image url eg: https://some_random_image.jpg/&rotation=90.
5. Its giving me another image after rotating the image, and I am updating the state with new image url.
6. At that time, cropper mask is not proper.

I hope my issue is clear now.
thanks!

[dominictobias]

My current approach.

1. I am getting the url of the image from an external source, eg: https://some_random_image.jpg/
2. This image url I have stored in the useState and the state I have passed to the src of image in React_crop.
3. Now, once user clicks in rotate button, on click of rotate, I am getting rotation degree as 90, 180, 270 and 0.
4. Once I have the rotation degree, I am passing the rotation to my image url eg: https://some_random_image.jpg/&rotation=90.
5. Its giving me another image after rotating the image, and I am updating the state with new image url.
6. At that time, cropper mask is not proper.

I hope my issue is clear now. thanks!

Ah I see that should work. Can you share the code?

In the demo if I switch between a landscape and portrait image it works, so want to understand the difference.

Screen.Recording.2024-11-27.at.4.04.37.PM.mov

[rajputkamal]

can we see that during the google meet?
code is pretty big to share.

[rajputkamal]

I fixed it, thanks