Image Cropping on Mobile

[kschmott]

Hello all!
I was testing out the example and notice that when using this sandbox https://codesandbox.io/s/1rmqky233q?file=/src/cropImage.js on mobile(iphone) the image doesn't center if you are zoomed out enough. Here is an example:

e

Is there any way around this?

Thanks!

[ValentinH]

I just tried on my Android phone and doesn't have the same behavior as in your screenshot. However, I have it if I set restrictPositionto `true, did you change the code in the meantime?

[kschmott]

I did it with restrict position false as it is in the sandbox. I just tried it on an android phone and works fine. I have no idea why it is different on iPhone. Either way this is very problematic for me. Any ideas?

[kschmott]

If I crop this on iphone I get what I initially showed.

[kschmott]

I figured out the issue. drawImage on canvas looks like this: drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight). On ios devices, the sx and sy will not go past 0 into the negatives. If given a negative value it will default to 0. Anyone know what I should do about this?

[kschmott]

Sorry back again but I managed to fix it for IOS devices. I'll share the code below

if (pixelCrop.x < 0 || pixelCrop.y < 0) {
    console.log("test");
    ctx.drawImage(
      image,
      0,
      0,
      pixelCrop.width,
      pixelCrop.height,
      Math.abs((image.width - pixelCrop.width) / 2),
      Math.abs((image.height - pixelCrop.height) / 2),
      pixelCrop.width,
      pixelCrop.height
    );
  } else {
    ctx.drawImage(
      image,
      pixelCrop.x,
      pixelCrop.y,
      pixelCrop.width,
      pixelCrop.height,
      0,
      0,
      pixelCrop.width,
      pixelCrop.height
    );