The cropped image is black on mobile Safari when the image is very large

[yuanxiang1990]

The cropped image is black on mobile Safari when the image is very large.(https://codesandbox.io/embed/react-easy-crop-custom-image-demo-hgqst?codemirror=1).

[ValentinH]

Thanks for posting this issue. However I don't have a device with Safari mobile so I'm not able to reproduce.

When you say the "cropped image", are you talking about the image in the pop-up after clicking the Crop button ?

[yuanxiang1990]

Thanks for posting this issue. However I don't have a device with Safari mobile so I'm not able to reproduce.

When you say the "cropped image", are you talking about the image in the pop-up after clicking the Crop button ?

Yes, maybe Safari on the mobile terminal will fail to draw a large picture on canvas.

[ValentinH]

Actually, on codesandbox, we are using a less efficient approach to create the image. If you look at the createImage.js file, there is a commented block (As a blob): try to use this one instead of the block above.

[yuanxiang1990]

Actually, on codesandbox, we are using a less efficient approach to create the image. If you look at the createImage.js file, there is a commented block (As a blob): try to use this one instead of the block above.

Thank you for your advice. I tried,The problem still exists.I think it's caused by the following code in the createimage.js file

const safeArea = Math.max(image.width, image.height) * 2 
canvas.width = safeArea
canvas.height = safeArea

// translate canvas context to a central location on image to allow rotating around the center.
ctx.translate(safeArea / 2, safeArea / 2)
ctx.rotate(getRadianAngle(rotation))
ctx.translate(-safeArea / 2, -safeArea / 2)

// draw rotated image and store data.
ctx.drawImage(
    image,
    safeArea / 2 - image.width * 0.5,
    safeArea / 2 - image.height * 0.5
)

The width and height of the canvas can be large, which will lead to canvas rotation and painting failure under the mobile Safari browser with low performance.

[ValentinH]

Do you get any error message in the console when the black screen appears?

[brennick]

I am having the same issue on iOS 13 Safari. Images from camera are failing to be able to be cropped and appearing as a black image.

[ValentinH]

Are you also talking about the image that we crop on the client-side and display in the pop-up?
Or about the image in the cropper component?

[brennick]

The image that is appearing black is after the cropping has finished and when we are trying to display the output.

We resolved it by modifying our getCroppedImage code to divide the width and height by 2.

Before:

      const image: HTMLImageElement = await createImage(imageSrc);

      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      const safeArea = Math.max(image.width, image.height) * 2;

      // set each dimensions to double largest dimension to allow for a safe area for the
      // image to rotate in without being clipped by canvas context
      canvas.width = safeArea;
      canvas.height = safeArea;

      if (!ctx) {
        setIsLoading(false);
        return null;
      }

      const getRadianAngle = (degreeValue: number) => {
        return (degreeValue * Math.PI) / 180;
      };
      // translate canvas context to a central location on image to allow rotating around the center.
      ctx.translate(safeArea / 2, safeArea / 2);
      ctx.rotate(getRadianAngle(rotation));
      ctx.translate(-safeArea / 2, -safeArea / 2);

      // draw rotated image and store data.
      ctx.drawImage(
        image,
        safeArea / 2 - image.width * 0.5,
        safeArea / 2 - image.height * 0.5
      );
      const data = ctx.getImageData(0, 0, safeArea, safeArea);

      // set canvas width to final desired crop size - this will clear existing context
      canvas.width = pixelCrop.width;
      canvas.height = pixelCrop.height;

      // paste generated rotate image with correct offsets for x,y crop values.
      ctx.putImageData(
        data,
        0 - safeArea / 2 + image.width * 0.5 - pixelCrop.x,
        0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y
      );
      return canvas.toDataURL('image/jpeg');

After:

      const image: HTMLImageElement = await createImage(imageSrc);

      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      image.width = image.width / 2;
      image.height = image.height / 2;

      const safeArea = Math.max(image.width, image.height) * 2;

      // set each dimensions to double largest dimension to allow for a safe area for the
      // image to rotate in without being clipped by canvas context
      canvas.width = safeArea;
      canvas.height = safeArea;

      if (!ctx) {
        setIsLoading(false);
        return null;
      }

      const getRadianAngle = (degreeValue: number) => {
        return (degreeValue * Math.PI) / 180;
      };
      // translate canvas context to a central location on image to allow rotating around the center.
      ctx.translate(safeArea / 2, safeArea / 2);
      ctx.rotate(getRadianAngle(rotation));
      ctx.translate(-safeArea / 2, -safeArea / 2);

      // draw rotated image and store data.
      ctx.drawImage(
        image,
        safeArea / 2 - image.width,
        safeArea / 2 - image.height
      );
      const data = ctx.getImageData(0, 0, safeArea, safeArea);

      // set canvas width to final desired crop size - this will clear existing context
      canvas.width = pixelCrop.width;
      canvas.height = pixelCrop.height;

      // paste generated rotate image with correct offsets for x,y crop values.
      ctx.putImageData(
        data,
        0 - safeArea / 2 + image.width - pixelCrop.x,
        0 - safeArea / 2 + image.height - pixelCrop.y
      );
      return canvas.toDataURL('image/jpeg');

[ValentinH]

Thanks for sharing this @brennick. Indeed, I found another issue thread on another React crop component sharing this. Making the canvas smaller was also the solution there.

[ValentinH]

I'm closing this issue now as this is actually not an issue with the library itself. Creating the cropped image is not done by the lib.
Also a solution was shared above.

[ValentinH]

Just a small update: I've changed the logic in the demo to use a smaller safeArea: it used to be twice the max of width and height. Now it uses this formula which only uses the minimal size:

const maxSize = Math.max(image.width, image.height)
const safeArea = 2 * ((maxSize / 2) * Math.sqrt(2))

[a-m-dev]

problem still exists for iPhone , iPhone just warns us that its been exceeds the maximum memory allocated

[ValentinH]

OK then it means you need to make the safeArea even smaller to reduce the memory footprint.