图像在 PC 上和通过输入类型文件的不同旋转

Posted 2023-03-13

【中文标题】图像在 PC 上和通过输入类型文件的不同旋转

【英文标题】：Different rotation of image on PC and through input type file

【发布时间】：2021-03-01 13:03:41

【问题描述】：

图像采用jpeg 格式，并且在我的PC 上正常显示（我使用的是Ubuntu），但是一旦我在浏览时尝试通过<input type="file"... 上传它，它就会显示为向右旋转 90 度。 我的应用程序中有部分代码根据EXIF.getTag(this, 'Orientation') 参数旋转图像，在这种情况下它返回数字 8，这意味着图像应该向左旋转 90 度，即使它不应该（因为它已经旋转在 PC 上）。

这是什么原因造成的？

编辑：

我找到了包含 exif 参数 here 的图像。因此，一旦我使用提供的链接下载它们，它们就会在 PC 上正确显示，但在上传时会旋转。

【参考方案1】：

有两个主要的元数据标签用于指定图像方向：

Orientation: [TopLeft, BottomRight, RightTop, LeftBottom]

和

exif:Orientation: [1, 3, 6, 8]

我怀疑您的图像是由使用exif:Orientation 元标记的设备拍摄的。 Ubuntu 默认图像查看器支持exif:Orientation，因此它可以正确显示图像。但是，浏览器不支持此标签（出于向后兼容性的原因），它们必须回退到默认方向，在您的情况下向右旋转 90 度。

您可以通过使用Orientation 元标记补充您的图像来解决您的问题。这可以通过大多数图像查看软件来完成，只需旋转图像并将其保存在适当的位置（在 Ubuntu 中，您会看到图像正确旋转，因此只需将其向任意方向旋转，然后将其旋转回来并保存）。

【讨论】：

谢谢，大概是这样。但问题是我需要通过代码以某种方式做到这一点，因为这个问题是由使用我正在开发的应用程序的用户报告的。有没有一种方法可以完成我通常使用 javascript 通过“图像查看软件”完成的过程？

@nikname 您可以为每个旋转角度创建 3 个 CSS 类，并根据EXIF.getTag(this, 'Orientation') 的输出应用它们。您还可以使用一个工具来为您处理问题：JavaScript-Load-Image

我看到它并且可能会使用它。谢谢