iOS中的Exif方向问题答案

【问题标题】：Exif Orientation issue in iOSiOS中的Exif方向问题
【发布时间】：2013-10-14 12:56:36
【问题描述】：

在 Safari iOS 中，一个已知问题是使用相机拍摄的大图像上设置了 exif 方向标志，这会导致查看时图像的方向不正确。例如，如果 iPhone 处于纵向并拍摄照片，则生成的图像将看起来像旋转到横向。已创建名为 megapix-image.js 和 exif.js 的 Jquery 插件来处理这种情况，方法是检测相机图像上的 exif 方向标志并自动旋转图像以进行补偿。我在我的 Web 应用程序中使用它，它在客户端运行良好，但我遇到的问题是我需要将旋转后的图像返回到服务器。发送回服务器的图像是输入类型=文件控件中的图像。这是 megapix-image 用来旋转图像的图像来源。我需要做的是用旋转的图像替换存储在 input type=file 控件中的图像，这样它将是被上传的图像。换句话说，只是在客户端旋转图像并没有任何价值，只是让用户暂时看到图像的方向与他们用相机拍照时的方向相同。最重要的是旋转后的图像被上传回服务器。我希望我的措辞清楚并且有道理。如何将旋转后的图像返回到 input type=file 控件中，以便将其上传到上传的图像中，而不是方向错误的图像？

编辑：

我在各种设备上进行了更多测试：在运行 iOS 7 的 iPhone4、运行 iOS 7 的 iPad 和运行 iOS 6 的 iPad 上，通过 input type=file 控件在 Safari 和服务器上都存在方向问题。 iPhone4 和 iPad 上的 iOS 7 中修复了垂直挤压/二次采样问题。在运行 iOS 7 的 iPhone 5C 上，Safari 中的方向正确，但存在垂直挤压/二次采样问题。

【问题讨论】：

您不能修改文件输入元素的值。您有 2 个选项：1.) 在画布上修改图像，然后导出到 Blob 或数据 URL 并将其发送到您的服务器。 2.）检测用户命令的方向变化，将该元数据与原始图像一起传递到您的服务器，并在服务器端旋转它。 #1 是不可取的，恕我直言，因为您最终会发送一个删除所有 EXIF 数据的图像。但是，您可以重新插入（修改后的）EXIF 数据并上传，但我认为这并非易事。
另外，我不确定我是否理解您所指的问题。我不知道 iOS 中有任何错误会写入错误的方向标记值。您可能会将此与 iOS 对 2 MP 或更大图像执行的 img 子采样混淆。或者你可能会混淆这一点，因为 iOS 中的 Safari 在显示 img 时实际上会考虑方向标志，而大多数其他浏览器则不会。
如果我无法修改文件输入元素，那么我想旋转图像服务器端。我不知道这算不算bug，但是如果你在iOS（iPhone或iPad）中用相机拍照，当图像在input type=file控件中返回给web应用程序时，图像出现旋转。这不是 iOS 7 中修复的图像二次采样问题。是的，iOS 中的 Safari 考虑了方向标志，但这不仅仅是 Safari 中的问题，因为当图像上传到服务器时，它也是不正确的那里的方向。
我想我没有看到你所看到的。我刚刚在运行 iOS7 的 iPhone 5 上以不同的方向拍摄了几张图像，上传了它们，并检查了方向标签值：一切似乎都是正确的。此外，据我所知，iOS7 中的图像二次采样没有任何改变。正如预期的那样，iOS7 仍然对 2 个 MP+ 图像进行二次采样。
Ray，您是否尝试过上述使用输入类型=文件控件获取图像的 Web 应用程序？我可以证明，在 iOS 7 中，子采样问题已为我修复，再次使用 input type=file 控件。在 iOS 6.3 中，图像被垂直挤压，我不得不使用 jquery 插件（百万像素图像.js）来纠正它。在 iOS 7 中，图像不会垂直挤压，我不再需要使用 jquery 插件对其进行更正。我的测试是在运行 iOS 7 的 iPhone 4 上完成的。

标签： javascript iphone ios

【解决方案1】：

问题已解决如下：

正如上面 Ray Nicholus 所说，您无法在文件控件内部修改图像文件数据，因此无论做什么都必须在服务器端完成。以下是我创建的用于更改图像方向服务器端的 VB.Net 代码，它运行良好。基本上它会通过将图像旋转到正确的方向来自动校正任何图像，使其看起来正确：

  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

【讨论】：