Javascript iOS中的Exif定向问题

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

编辑：

---

我在各种设备上做了更多的测试：在运行iOS 7的iPhone4、运行iOS 7的iPad和运行iOS 6的iPad上，方向问题在Safari和服务器上都存在，通过输入类型=文件控件。iPhone4和iPad上的iOS 7解决了垂直挤压/二次采样问题。在运行iOS 7的iPhone 5C上，Safari中的方向是正确的，但存在垂直挤压/子采样问题

该问题已解决如下：

正如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

公共函数TestRotate（sImageFilePath作为字符串）作为布尔值
尺寸rft为RotateFlipType=RotateFlipType.RotateNoneFlipNone
将img调整为位图=Image.FromFile（sImageFilePath）
将属性标注为PropertyItem（）=img.PropertyItems
Dim bReturn为布尔值=False
对于属性中的每个p As PropertyItem
如果p.Id=274，则
尺寸方向为短=位转换器.ToInt16（p.值，0）
选择案例方向
案例1
rft=RotateFlipType.RotateNoneFlipNone
案例3
rft=RotateFlipType.Rotate180FlipNone
案例6
rft=RotateFlipType.Rotate90FlipNone
案例8
rft=RotateFlipType.Rotate270FlipNone
结束选择
如果结束
下一个
如果rft RotateFlipType.RotateNoneFlipNone，则
旋转唇模（rft）
System.IO.File.Delete（sImageFilePath）
保存（sImageFilePath，System.Drawing.Imaging.ImageFormat.Jpeg）
bReturn=True
如果结束
回程回程
端函数

问题已解决如下：

正如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

公共函数TestRotate（sImageFilePath作为字符串）作为布尔值
尺寸rft为RotateFlipType=RotateFlipType.RotateNoneFlipNone
将img调整为位图=Image.FromFile（sImageFilePath）
将属性标注为PropertyItem（）=img.PropertyItems
Dim bReturn为布尔值=False
对于属性中的每个p As PropertyItem
如果p.Id=274，则
尺寸方向为短=位转换器.ToInt16（p.值，0）
选择案例方向
案例1
rft=RotateFlipType.RotateNoneFlipNone
案例3
rft=RotateFlipType.Rotate180FlipNone
案例6
rft=RotateFlipType.Rotate90FlipNone
案例8
rft=RotateFlipType.Rotate270FlipNone
结束选择
如果结束
下一个
如果rft RotateFlipType.RotateNoneFlipNone，则
旋转唇模（rft）
System.IO.File.Delete（sImageFilePath）
保存（sImageFilePath，System.Drawing.Imaging.ImageFormat.Jpeg）
bReturn=True
如果结束
回程回程
端函数

不能修改文件输入元素的值。您有2个选项：1.）在画布上修改图像，然后导出到

Blob

或数据URL，并将其发送到服务器。2.）检测用户命令的方向更改，将元数据与原始图像一起传递到服务器，并在服务器端旋转#1是不可取的，IMHO，因为您最终将发送一个包含所有EXIF数据的图像。不过，您可以重新插入（修改后的）EXIF数据并上传，但我认为这并非小事。此外，我不确定我是否理解您所指的问题。我不知道iOS中有任何错误写入了错误的方向标记值。您可能会将此与iOS对2 MP或更大图像执行的img子采样相混淆。或者，您可能会将这与iOS中的Safari在显示img时实际考虑了方向标志这一事实相混淆，而大多数其他浏览器则没有。如果我无法修改文件输入元素，则我希望旋转图像服务器端。我不知道它是否被认为是一个bug，但是