search

sekoyo / react-image-crop

A responsive image cropping tool for React
ISC License
3.83k stars 343 forks source link

IOS Chrome Crop big size #477

Open evanoralph opened 2 years ago

evanoralph commented 2 years ago

Hi i found a bug on ios mobile that when i select a larger crop the canvas will now show the preview but when i select a small one its working 7D2641B6-B2AF-4376-B625-C4061CB0FA7E Skype_Picture_2022_04_16T18_54_39_646Z

is there any one already know how to fix this ?

Finki007 commented 2 years ago

Hello, I do have the same bug. @evanoralph Did you found a workaround? Regards

sekoyo commented 2 years ago

Can you rephrase this please? Not sure what you mean by “but when I click a small one”. Is this related to iOS or just a general issue (sounds like a general issue).

On Wed, 20 Apr 2022 at 15:02, Finki007 @.***> wrote:

Hello, I do have the same bug. @evanoralph https://github.com/evanoralph Did you found a workaround? Regards

— Reply to this email directly, view it on GitHub https://github.com/DominicTobias/react-image-crop/issues/477#issuecomment-1103970613, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAFZT6WQN6JANTSNWDCEB5LVGAE5PANCNFSM5TSXN43Q . You are receiving this because you are subscribed to this thread.Message ID: @.***>

Finki007 commented 2 years ago

Indeed it is an bug (maybe they will call it a feature) in Safari: https://pqina.nl/blog/canvas-area-exceeds-the-maximum-limit/

sekoyo commented 2 years ago

Indeed it is an bug (maybe they will call it a feature) in Safari: https://pqina.nl/blog/canvas-area-exceeds-the-maximum-limit/

Ah I see! Not much we can do about that then. Maybe you load the image with https://github.com/blueimp/JavaScript-Load-Image/

and set a max width: https://github.com/blueimp/JavaScript-Load-Image/#image-scaling ?

Or you could just ensure the crop container is not above a certain size?

Finki007 commented 2 years ago

@DominicTobias @evanoralph I could fix it by setting the ratio to 0.5: const pixelRatio = 0.5 instead of const pixelRatio = window.devicePixelRatio in canvasPreview.ts

evanoralph commented 2 years ago

@DominicTobias sorry i did not specify the platform , i was using and IOS phone with google chrome browser i think @Finki007 is right since the iphone have retina resolution the crop image is to big to display when selecting a large chuck on the image ill try @Finki007 solution i think we cannot do anything about the limit

paintoshi commented 1 year ago

As @Finki007 said. It worked for me too, but I just set the pixelRatio to 1