react-image-crop

react-image-crop copied to clipboard

when I am getting the Final Crop image, not equal matching my crop area image, let me know, if i am doing wrong

also its not working in macBook.

const handleCropComplete = (crop: any) => {
    setCompletedCrop(crop);
    if (crop.width && crop.height) {
      // Generate the cropped image data URL
      const image = new Image();
      image.src = ProfileImage;
      const canvas = document.createElement("canvas");
      canvas.width = crop.width;
      canvas.height = crop.height;
      const ctx = canvas.getContext("2d");

      if (ctx) {
        ctx.drawImage(
          image,
          crop.x,
          crop.y,
          crop.width,
          crop.height,
          0,
          0,
          crop.width,
          crop.height
        );

        const croppedDataURL: any = canvas.toDataURL("image/jpeg");
        setCroppedImage(croppedDataURL);
      }
    }
  };

I'm having exactly the same issue after bumping up from v8 to v11 (when img src got introduced as a children).

Did some digging by resizing my image to the same image as my modal for cropping and it worked almost fine.

So it seems to me it's cropping the original image while not taking into the factor scaled down coordinates, like maybe part of the code is not being fired at all?

Wild guess though.