Exif Orientation issue in iOS

Question

In Safari iOS, it is a known issue that large images taken with the camera have an exif orientation flag set on them which makes the orientation of the image incorrect when viewed. For example, if an iPhone is in portrait orientation and a picture is taken, the resulting image will appear to be rotated to landscape. Jquery plugins named megapix-image.js and exif.js have been created to handle this situation by detecting the exif orientation flag on the camera image and automatically rotating the image to compensate for it. I am using this in my web application and it works well on the client side, but the problem I am having is that I need to get the rotated image back to the server. The image that is sent back to the server is the image in the input type=file control. This is the source of the image that megapix-image uses to rotate the image. What I need to do is to replace the image stored inside of the input type=file control with the rotated image so it will be the one that gets uploaded. In other words, just rotating the image on the client side is of no value except for letting the user temporarily see that the image is in the same orientation as when they took the picture with the camera. The most important thing is that the rotated image gets uploaded back to the server. I hope I worded that clearly and it makes sense. How do I get the rotated image back into the input type=file control so it will be the one that gets uploaded, instead of the one with the incorrect orientation?

Edit:

I did some more testing on various devices: On iPhone4 running iOS 7, iPad running iOS 7, and iPad running iOS 6, the orientation issue is present both in Safari and on the server via the input type=file control. The vertical squashing/subsampling issue is fixed in iOS 7 on the iPhone4 and iPad. On iPhone 5C running iOS 7, the orientation is correct in Safari but the vertical squashing/subsampling issue is present.

You can't modify the value of a file input element. You have 2 options: 1.) Modify the image on a canvas, then export to a Blob or data URL and send that to your server. 2.) Detect the orientation change ordered by the user, pass that metadata to your server along with the original image, and rotate it server-side. #1 is not advisable, IMHO, as you will end up sending an image with all EXIF data stripped out. You could, however, re-insert the (modified) EXIF data and upload that, but this would be non-trivial I would think. — Ray Nicholus
Also, I'm not sure I understand what issue you are referring to. I'm not aware of any bug in iOS that writes an incorrect Orientation tag value. You might be confusing this with the img subsampling performed by iOS for 2 MP images or larger. Or perhaps you are confusing this with the fact that Safari in iOS actually takes the Orientation flag into account when it displays an img, whereas most other browsers do not. — Ray Nicholus
If I cannot modify the file input element then I would like to rotate the image server side. I don't know if it is considered a bug or not, but if you take a picture with the camera in iOS (iPhone or iPad), when the image is returned to the web application in the input type=file control, the image appears rotated. This is not the image subsampling issue, which is fixed in iOS 7. Yes, Safari in iOS takes the orientation flag into account, but it is not just an issue in Safari because when the image gets uploaded to the server it is also of incorrect orientation there. — Obi Wan
I guess I'm not seeing what you are seeing. I've just taken several images on my iPhone 5 running iOS7 at various orientations, uploaded them, and checked the Orientation tag value: all appear to be correct. Also, nothing, to my knowledge, changed as far as image subsampling in iOS7. iOS7 still subsamples 2 MP+ images, as expected. — Ray Nicholus
Ray, have you tried the above using a web application that uses the input type=file control to get the image? I can attest that the subsampling issue was fixed for me in iOS 7, again with the input type=file control. In iOS 6.3 the image was vertically squished and I had to use a jquery plugin (megapixel-image.js) to correct it. In iOS 7 the image is not vertically squished and I no longer need to correct it using a jquery plugin. My testing was done on an iPhone 4 running iOS 7. — Obi Wan

Obi Wan Obi Wan · Accepted Answer · 2013-10-11T20:36:50

The issue has been resolved as follows:

As Ray Nicholus said above, you cannot modify the image file data inside of the file control, so whatever is done must be done server side. Following is VB.Net code I created to change the image orientation server side and it works perfectly. Basically it will automatically correct any image by rotating it to the proper orientation so it appears correct:

  Public Function TestRotate(sImageFilePath As String) As Boolean
    Dim rft As RotateFlipType = RotateFlipType.RotateNoneFlipNone
    Dim img As Bitmap = Image.FromFile(sImageFilePath)
    Dim properties As PropertyItem() = img.PropertyItems
    Dim bReturn As Boolean = False
    For Each p As PropertyItem In properties
      If p.Id = 274 Then
        Dim orientation As Short = BitConverter.ToInt16(p.Value, 0)
        Select Case orientation
          Case 1
            rft = RotateFlipType.RotateNoneFlipNone
          Case 3
            rft = RotateFlipType.Rotate180FlipNone
          Case 6
            rft = RotateFlipType.Rotate90FlipNone
          Case 8
            rft = RotateFlipType.Rotate270FlipNone
        End Select
      End If
    Next
    If rft <> RotateFlipType.RotateNoneFlipNone Then
      img.RotateFlip(rft)
      System.IO.File.Delete(sImageFilePath)
      img.Save(sImageFilePath, System.Drawing.Imaging.ImageFormat.Jpeg)
      bReturn = True
    End If
    Return bReturn

  End Function

Exif Orientation issue in iOS

1 Answers