Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not able to catch exact crop image #566

Open
iamkashhif opened this issue Oct 26, 2023 · 1 comment
Open

Not able to catch exact crop image #566

iamkashhif opened this issue Oct 26, 2023 · 1 comment

Comments

@iamkashhif
Copy link

iamkashhif commented Oct 26, 2023

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.

image

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);
      }
    }
  };
@MrSala
Copy link

MrSala commented Feb 20, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants