Jcrop incorrect orientation from Iphone upload, how i can do?

问题

I have a site my jCrop tool that create this flow:

users upload photos->they crop it->they upload it on my server

The problems comes when i try tu upload a photo taken from the iphone camera. 1- If i upload the picture from an iphone, it appear correctly oriented in preview/crop mode, then after the php upload i see the result in a wrong orientation.

2- If i upload a picture taken with iphone by computer, the picture appears wrong orientated (a vertical photo comes rotated 90 degrees) in the preview/crop mode yet.

I have tried to remove exif with php but the problem remains because the wrong orientation is managed by exif and JCrop. This is my Jcrop init:

// initialize Jcrop
    $('#preview').Jcrop({
                        minSize: [167, 125], // min crop size
                        maxSize: [1500, 1125], // max crop size// min crop size
                        aspectRatio : 500/375, // keep aspect ratio 1:1
                        bgFade: true, // use fade effect
                        bgOpacity: .3, // fade opacity
                        boxWidth: 600,
                        onChange: updateInfoFoto,
                        onSelect: updateInfoFoto
                    }, function(){

                        // use the Jcrop API to get the real image size
                        var boundsFoto = this.getBounds();
                        boundxFoto = boundsFoto[0];
                        boundyFoto = boundsFoto[1];

                        // Store the Jcrop API in the jcrop_api_foto variable
                        jcrop_api_foto = this;


                    });

There's a way to solve this iphone related problem? If not there's another crop tool that is not affected by this bug?

回答1:

iPhones manipulate images in the browser using exif orientation data. So if you have an image that is physically in landscape mode (e.g. on the server, width > height) but image was taken with iphone in portrait orientation, it will use the the tag to rotate the image in the browser on the iphone. (on desktop browsers this will not occur)

This is what causes trouble for jCrop.

Because jCrop doesn't have code to accommodate for this (though it probably should), I have used a solution where I upload the image to the server first, correct the rotation and update the exif using server side code.

So the upload flow is like this:

user selects and uploads photo to server as-is
when the upload submits, I create a copy of the image which is physically rotated to the orientation indicated in the exif data, and ensure that the exif data is updated accordingly. (e.g. if exif originally indicated 90 deg CW rotation, I do that rotation, and update the exif so that it no longer indicates this rotation)
when the page reloads after submission, I show the jCrop workspace with the new version of the image.

Of course this only works if the exif orientation data from the uploaded image is accurate.

来源：https://stackoverflow.com/questions/36034437/jcrop-incorrect-orientation-from-iphone-upload-how-i-can-do

标签

php

ios

jcrop