iOS 6 Safari Image Upload - Orientation Wrong

Question

I've built a web app which lets you upload a photo from the browser. When using this in iOS 6, photos seem to end up in landscape orientation even if they were taken in portrait when uploaded. Should I be doing some server side checks to get the image the right way round or is there some kind of iOS specific attributes/JavaScript I can apply to the upload form to fix this?

Update

As requested, here's the code I wrote to do this. Pre-requisites are that I'm using PHP and the WideImage library (this is a snippet from a much larger script so you could use something different for image manipulation if you like).

// Load Image Into Wide Image
$image=WideImage::load(IMG_UPLOAD_DIR.$result['name']);
$exif=exif_read_data(IMG_UPLOAD_DIR.$result['name']);
$orientation=$exif['Orientation'];
$result['orientation']=$orientation;

// Use Wide Image To Resize Images
$full=$image->resize(IMG_FULL_H,IMG_FULL_H);
$thumb=$image->resize(IMG_THUMB_W,IMG_THUMB_H);

switch($orientation){
    case 2:
        $full->mirror()->saveToFile(IMG_UPLOAD_DIR.$result['name'], 90);
        $thumb->mirror()->saveToFile(IMG_UPLOAD_DIR.$thumbName, 90);
        break;

    case 3:
        $full->rotate(-180)->saveToFile(IMG_UPLOAD_DIR.$result['name'], 90);
        $thumb->rotate(-180)->saveToFile(IMG_UPLOAD_DIR.$thumbName, 90);
        break;

    case 4:
        $full->rotate(180)->mirror()->saveToFile(IMG_UPLOAD_DIR.$result['name'], 90);
        $thumb->rotate(180)->mirror()->saveToFile(IMG_UPLOAD_DIR.$thumbName, 90);
        break;

    case 5:
        $full->rotate(90)->mirror()->saveToFile(IMG_UPLOAD_DIR.$result['name'], 90);
        $thumb->rotate(90)->mirror()->saveToFile(IMG_UPLOAD_DIR.$thumbName, 90);
        break;

    case 6:
        $full->rotate(90)->saveToFile(IMG_UPLOAD_DIR.$result['name'], 90);
        $thumb->rotate(90)->saveToFile(IMG_UPLOAD_DIR.$thumbName, 90);
        break;

    case 7:
        $full->rotate(-90)->saveToFile(IMG_UPLOAD_DIR.$result['name'], 90);
        $thumb->rotate(-90)->saveToFile(IMG_UPLOAD_DIR.$thumbName, 90);
        break;

    case 8:
        $full->rotate(-90)->saveToFile(IMG_UPLOAD_DIR.$result['name'], 90);
        $thumb->rotate(-90)->saveToFile(IMG_UPLOAD_DIR.$thumbName, 90);
        break;

    default:
        $full->saveToFile(IMG_UPLOAD_DIR.$result['name'], 90);
        $thumb->saveToFile(IMG_UPLOAD_DIR.$thumbName, 90);
        break;
}

score 6 · Accepted Answer · answered Oct 24 '12 at 20:27

6

Check the images exif metadata, iPhone camera takes 'rotated' images.

answered Oct 24 '12 at 20:27

A-Live

8,904
2
39
74

Thanks - grabbed the `exif` metadata and added some extra code to my image resize script and I'm done :) – edcs Oct 25 '12 at 18:55
3

I think the code used for this should be shared in this answer / question. – eladleb Feb 13 '13 at 13:07
@eladleb I believe that will be a separate problem without universal solution. If you have particular question about reading exif data, please go ahead and create new question. – A-Live Feb 13 '13 at 13:22
I'll add my code to an answer to this question as it's too long to add to a comment... – edcs Feb 19 '13 at 20:58
@edcs Thanks, detailed question is always appreciated. For everyone who could have a similar problem not using PHP or WideImage, please go ahead and create a separate question now when you understand the problem source. – A-Live Feb 20 '13 at 11:08
Thanks so much for adding the fix in the question. Saved me a ton of time. – evanmcd Mar 08 '13 at 15:32

score 2 · Answer 2 · edited May 23 '17 at 12:31

2

You might try this jQuery plugin ( at the bottom of this thread )

IOS6 and Safari Photo Uploading - File API + Canvas + jQuery Ajax Uploading and Resizing Files Asynchronously

edited May 23 '17 at 12:31

Community

1
1

answered Oct 25 '12 at 04:48

bardu

727
2
8
24

score 1 · Answer 3 · answered Feb 12 '13 at 14:46

As an extension to A-Live's answer:

If you are using ruby, RMagick has an auto_orient method. From documentation:

Rotates or flips the image based on the image's EXIF orientation tag. Note that only some models of modern digital cameras can tag an image with the orientation. If the image does not have an orientation tag, or the image is already properly oriented, then auto_orient returns an exact copy of the image.

score 0 · Answer 4 · answered Jan 23 '14 at 18:37

Worth noting that running your image through Cloudinary sorts this out.

Prior to routing through that service the photos I had taken with my iPhone would display as rotated (seemingly, without reason) only on desktop.

Once behind a Cloudinary url, with any image transformation function, the image is returned in the proper orientation.

I'm using their paid service, but it seems as though they have a free tier.

iOS 6 Safari Image Upload - Orientation Wrong

4 Answers4