Blank image when image is rotated and cropped in iOS about cropro

[ailon]

Thanks, @Malli1320! I see the issue now. I will investigate and get back to you.

[ailon]

No, the plan is to add a setting that will be the max area size (eg. 2^24) and it will check if the resulting image fits and then downscale if it doesn't.

[ailon]

I've released v1.5.0 that should mitigate this issue. Set cropArea.renderMaxSize = Math.pow(2, 24); to limit the size to what iOS Safari can handle.

[ailon]

Hi. I've played with it for a bit and couldn't reproduce the issue. Could you provide some more details/steps to reproduce? Do you experience the same on the demo page here?

Also, if you see the spinner it feels like there should be some error in the browser's console.

[Malli1320]

Here is the link to reproduce the issue
@ailon https://codesandbox.io/p/sandbox/cropro-all-defaults-demo-forked-2lkll7?file=%2Fsrc%2Findex.js%3A16%2C4

steps to reproduce

1. click image
2. rotate 90 deg left or right
3. resize the crop rectangle on image
4. click save

[ailon]

I've been trying to get to the bottom of this and here's where I am at this point:

Looks like Safari on iOS can't render images with width * height larger than 2^24 (or 16,777,216). When you rotate a large (non-square) image on the side and have renderAtNaturalSize = true it becomes larger than that and Safari craps out silently. A quick workaround would be to disable renderAtNaturalSize or set renderWidth and renderHeight manually. Would that work in your scenario?

I may just add some setting to enable "protection" from this issue by limiting the render size to that max value. I'm not very keen on either applying this across the board or doing some "dirty" user-agent Safari/iOS detection, though.

[Malli1320]

@ailon
This is what we get for renderAtNaturalSize is enabled

and this is for renderAtNaturalSize is disabled

Even though if we set renderWidth and rendreHeight we will face the same issue as of now because we will set the original image height and width and again it will exceed the max value.
But in our case we want the cropped image with the original dimension as above when renderAtNaturalSize is enabled, so if we disable the renderAtNaturalSize then what should be the calculation to set proper renderHeight and renderWidth in such a way that we get the image without compromising the quality.

[ailon]

I will add a limiter that will take aspect ratio into account.

[Malli1320]

ok, still we need to disable renderAtNaturalSize after you set the limiter?