14

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;
}

4 Answers 4

6

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

6
  • Thanks - grabbed the exif metadata and added some extra code to my image resize script and I'm done :)
    – edcs
    Oct 25, 2012 at 18:55
  • 3
    I think the code used for this should be shared in this answer / question.
    – eladleb
    Feb 13, 2013 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, 2013 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, 2013 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, 2013 at 11:08
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

1

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.