matiasgali / guillotine

jQuery plugin to crop images within an area (fully responsive), allowing to drag (touch support), zoom and rotate.
http://guillotine.js.org
327 stars 100 forks source link

iphone scale issue... #61

Closed chrisribe closed 7 years ago

chrisribe commented 7 years ago

It seems that under ios, picking a photo that was taken in portrait mode messes up the scaling on display. What probably happens is that ios rotates the display image (I think), since once cropped and uploaded to server the picture ends up 90 degrees off and squished...

You can see something is wrong in the crop view (the image is off scale). Here are the example images.

Original ios (holding phone in portrait mode) 1_goodscale

Display in guillotine squished under ios (holding phone in portrait mode) 2_badscale

Any ideas on how to fix / handle this ? Thanks Chris

chrisribe commented 7 years ago

Iphone EXIF rotation seems to be the issue, ios rotates the image for proper display but saves the rotation in EXIF. The actual image data is not rotated so guillotine crop data does not fit.

Looking for solution...

chrisribe commented 7 years ago

Found a solution,

I simply apply the exif Orientation instructions on the server side after upload. This is so that the uploaded photo from the server is oriented properly BEFORE display in guillotine.

Under IOS the phone seems to display exif photos in their proper orientation. This messes up guillotine since the given crop parameters are invalid for the source file.

I applied this function to my uploaded picture and re-save the file. http://php.net/manual/fr/function.imagecreatefromjpeg.php#112902

Chris

matiasgali commented 7 years ago

Hi @chrisribe, it happens, it's a common issue. Thanks for seeing it through and closing it.

Happy coding.

chrisribe commented 7 years ago

No problem and thanks ;)