CODEWITHSUNDEEP
javascriptiphoneios
Obi Wan
Obi Wan

Reputation: 979

Exif Orientation issue in iOS

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.

Upvotes: 1

Views: 3231

Answers (1)

Obi Wan
Obi Wan

Reputation: 979

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

Upvotes: 2

Related Questions