ValentinH / react-easy-crop

A React component to crop images/videos with easy interactions

Home Page:https://valentinh.github.io/react-easy-crop/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Crop selections overlap

carlosdi0 opened this issue · comments

Bug Description:

When performing the crop process on a PNG image multiple times using react-easy-crop, it results in generating a collage of images instead of correctly cropping the image.

Steps to Reproduce:

  1. Load a PNG image into react-easy-crop.
  2. Perform a crop on a specific part of the image and save it.
  3. Reload the same image into react-easy-crop.
  4. Perform a new crop on a different part of the image.
  5. Save the second selection.
  6. Observe how the two crop selections overlap, resulting in a collage of the images instead of proper cropping.

Attached Video:
I have attached a video demonstrating the bug in action.
Codesandbox
Link to the video

Thank you so much for your hard work in developing this fantastic library. Keep up the excellent work!

Did you fix it since opening the issue? When I try the sandbox on my phone I'm not able to reproduce.

If not, what browser are you using?

Hi Valentin, im using Coogle Chrome versión 114.0.5735.134.
It's weird because we are three fellow developers and one of us can't reproduce it either.
I will try to fix it, I will keep you informed.

Thx for al :)

Just tried on Brave/MacOS and I'm able to reproduce.
This is very weird. I tried a few things like resetting the canvas or filling it with black and it doesn't solve it.

It seems to be a problem with the putImageData method. I will continue investigating and testing.

Did you fix it since opening the issue? When I try the sandbox on my phone I'm not able to reproduce.

If not, what browser are you using?

I pass you the pull request with the fix, I hope it is helpful, thank you very much!
#472