react-image-crop

react-image-crop copied to clipboard

Hello

My issue is that, once out of 50 tries or once out of 100 tries, the crop area doesn't appear. And when I console logged the crop, after onChange the crop width set to 0, and I could't figure out why.

const [crop, setCrop] = React.useState({
    unit: '%',
    width: 100,
    aspect,
  }); // initial crop
...

return (
 <ReactCrop
      src={file}
      crop={crop}
      onImageLoaded={(image) => {
        console.log('crop3', crop);

        imageRef.current = image;
      }}

      onChange={(percentCrop) =>
        {
          console.log('crop1', crop);
          console.log('copr4', percentCrop) // I think from here the crop width becomes 0
          setCrop(percentCrop);
        }
      }

      onComplete={(crop) => {
        console.log('crop2', crop);
        makeClientCrop(crop);
      }}
)

Like I mentioned earlier, this bug happens very rarely and ramdomly but I still need to fix it. Could you please hele me? Thank you

Hi, sorry but I'm no longer support < v10 anymore, my guess is that there is a bug in the code which detects if the aspect crop is invalid and tries to fix it - this code had various bugs and I stopped trying to "complete" or fix aspect crops.

You can read about how to upgrade to v10 here: https://github.com/DominicTobias/react-image-crop/releases/tag/10.0.0-beta.0 And check the CodeSandbox demo for an example