19

我有一个使用它的 HTML 文件控件,我正在尝试在服务器上上传文件。

  • 点击文件控制
  • 它将自动打开文件/相机选择对话框。
  • 我选择相机
  • 我拍了照片并保存
  • 现在提交表格
  • Capture 照片成功保存在服务器上,但旋转了 90 度。

此问题仅适用于 iPhone 或 IOS。

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

请告诉我,如果从相机拍摄,如何停止图像的自动旋转。

谢谢, 伊姆达杜森

4

1 回答 1

32

这可能与图像中的 EXIF/TIFF 元标记有关。

这些标签之一指示图像的方向。您上传到服务器的某些照片(例如从 iPhone 上传)可能有这些标签,而其他照片(来自不同的来源/工作流程)可能没有。服务器可能会或可能不会保留这些标签,并且可能会或可能不会读取标签以尝试正确定位图像。同样,网络浏览器可能会也可能不会关注这些标签。如果你上传包含标签的图片,结果肯定是不可预知的。

找出这是否是问题的一个好方法是从服务器下载一个“问题”图像和一个“好”图像,然后比较它们。在预览中打开它们并检查检查器的第二个选项卡。任何元信息都将显示在那里。查看一张图片是否有方向信息,而另一张没有。如果两者都没有显示元信息,那么很可能服务器将其全部剥离而不使用它,您可以忘记这个答案。

此外,您应该在不同的浏览器中进行比较。一些浏览器会读取此方向信息并相应地旋转图像,而其他浏览器则不会。

例如,我的一张 iPhone 以纵向模式拍摄的照片具有以下元标记:

  • 像素高度:2,448
  • 像素宽度:3,264
  • 方向:6(逆时针旋转 90°)

本机位图方向是横向
“方向”元标记指示图像读取软件旋转到纵向以进行显示。

(某些)图像软件使用元标记将图像“正确”旋转为纵向,但被其他将图像显示为横向的软件忽略。

这种情况令人困惑,并且对此没有既定标准(标签只是一个提示),因此在为在线出版物准备图像时,最安全的做法是去掉这些标签,然后在上传之前将图像物理旋转到正确的 BITMAP 方向. 如果您正在编写应用程序的服务器端,则可以在服务器上执行此操作。但是,以正确的BITMAP方向将图像传送到 Web 浏览器至关重要,并且没有方向元标记。

为什么是这样?因为即使在今天,不同的浏览器也对元标记采取不同的方法。

我刚才提到的 iPhone 图片显示如下:
Google Chrome 24纵向
Safari 6 纵向
Firefox 17横向
Opera 12横向

不是一个伟大的事态!

于 2012-12-20T14:55:10.770 回答