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;
}
Photos taken on smartphones, tablets and some cameras can look great on your device but appear upside down or sideways when uploaded to a post or page because the device stores the image's orientation in the EXIF metadata and not all software is able to read the metadata.
EXIF (Exchangeable Image File Format) data provides supplemental metadata, such as the date, time, camera settings, and image orientation. If an image contains the wrong image orientation EXIF data, or if that data is stripped in the upload process for whatever reason, it will display as rotated.
The EXIF orientation value is used by Photoshop and other photo editing software to automatically rotate photos, saving you a manual task.
Check the images exif
metadata, iPhone camera takes 'rotated' images.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With