Captured photo automatically rotated during upload in IOS 6.0 or iPhone

ios image file-upload form-submit
imdadhusen picture imdadhusen · Dec 20, 2012 · Viewed 20.2k times · Source

I have one HTML file control using this i am trying to upload file on server.

  • Click on file control
  • It will automatically open dialog for file/camera selection.
  • I select Camera
  • I captured photo and save
  • Now submit form
  • the Capture photo save successfully on server but it is rotated 90 degree.

This problem is only with iPhone or IOS.

<input id="image" name="image" type="file" accept="image/*" capture style="width: 58px" />

Please let me know, how to stop automatic rotation of image if captured from camera.

Thanks, Imdadhusen

Answer

foundry picture foundry · Dec 20, 2012

This could have something to do with EXIF/TIFF metatags in the images.

One of these tags indicates the orientation of the image. Some photos you upload to a server (eg from the iPhone) may have these tags, others (from a different source / workflow) may not. The server may or may not retain these tags, and may or may not read the tags in order to attempt correct orientation of the image. Similarly a web browser may or may not pay attention to these tags. If you upload images containing tags, the results will certainly be unpredictable.

A good way to find out if this is the issue would be to download a 'problem' image and a 'good' image from the server, and compare them. Open them in preview and check the second tab of the Inspector. Any meta-info will be displayed there. See if one image has orientation info and the other not. If neither display meta-info then it is fairly likely the server is stripping it all out and not using it, and you can forget about this answer.

Also you should compare in different browsers. Some browsers read this orientation info and rotate the image accordingly, others do not.

For example, an iPhone photo of mine which was take in portrait mode has the following metatags:

  • Pixel Height: 2,448
  • Pixel Width: 3,264
  • Orientation: 6 (Rotated 90° CCW)

The native bitmap orientation is landscape.
The 'orientation' metatag indicates to image reading software to rotate to portrait for display.

The metatag is used by (some) image software to 'correctly' rotate the image to portrait but ignored by other software which will display the image as landscape.

The situation is confusing and there is no established standard for this (the tags are just a hint), so when preparing images for an online publication the safest thing is to strip out these tags and physically rotate the image to the correct BITMAP orientation before uploading. If you are writing the server side of an app you could do this on the server. But it is vital to deliver images to a web browser in the correct BITMAP orientation with no orientation metatags.

Why is this? Because even today different browsers take different approaches to metatags.

The iPhone image I just mentioned displays as follows:
Google Chrome 24 portrait
Safari 6 portrait
Firefox 17 landscape
Opera 12 landscape

Not a great state of affairs!

Related questions

Upload image with parameters in Swift

I'm trying to upload an image with parameters in Swift. When I try this code, I can get the parameters but not the image uploadFileToUrl(fotiño:UIImage){ var foto = UIImage(data: UIImageJPEGRepresentation(fotiño, 0.2)) var request = NSMutableURLRequest(URL:NSURL(…

Read More
Upload image with multipart form-data iOS in Swift

i am having a problem with uploading image with multipart-form here is my code i used from this answer var request = NSMutableURLRequest(URL: url!) request.HTTPMethod = "POST" var boundary = generateBoundaryString() request.setValue("multipart/form-data; boundary=\(boundary)", forHTTPHeaderField: "Content-Type") var body = …

Read More
How to easily resize/optimize an image size with iOS?

My application is downloading a set of image files from the network, and saving them to the local iPhone disk. Some of those images are pretty big in size (widths larger than 500 pixels, for instance). Since the iPhone doesn't even …

Read More