Chrome 图片 EXIF 方向问题

Posted 2023-02-21

【中文标题】Chrome 图片 EXIF 方向问题

【英文标题】：Chrome Image EXIF Orientation Issue

【发布时间】：2017-07-13 01:49:03

【问题描述】：

我正在构建一个显示图片的网络应用程序。大部分图片是智能手机拍摄的，有EXIF旋转信息。 我公开了一个 url，它不加修改就返回图像 blob。

我注意到，当我将此 url 放入 img 标签时，Chrome 不尊重 EXIF 方向数据，但是当我将 url 放入 chrome 地址栏中时，它会显示一个带有图像的页面，然后它确实尊重 EXIF 方向。

对不起，我无法分享图片，我会尝试找到另一个可以分享的示例。

有人注意到这个问题吗？

【问题讨论】：

这对我来说似乎是个大问题。我正在建立一个数据库，其中包含数千张不同方向的图像。现在我必须在导入之前使用 Imagemagick 的转换和 -auto-orient 来修复它们......

相关说明，可能对某人有用：如果您使用iMazing HEIC Converter 或类似工具来转换从ios 设备发送的图像，请务必取消选中Keep EXIF data，这样您的图片之后尝试在 chrome 中查看（例如在上传期间）时不会翻转。您可以看到所选图像的Get info 的差异，它应该包含更多数据，当持久化 EXIF 数据时。

【参考方案1】：

这种行为的原因是，只有当图片作为主文档直接显示在浏览器选项卡中时，Chrome 才会根据 EXIF 数据自动旋转图片。

跟踪此实施的相关铬问题如下： https://bugs.chromium.org/p/chromium/issues/detail?id=56845

在未来，Chrome（和其他浏览器）将允许开发人员也为通过带有 CSS image-rotation 属性的 img 标签显示的图像启用自动旋转： https://bugs.chromium.org/p/chromium/issues/detail?id=158753

【讨论】：

一年半过去了，chrome还是不支持;(

看起来它只会在我们之后的遥远的将来。

为什么在浏览器中显示 html 内的图像（忽略 EXIF 方向）与在浏览器选项卡中显示图像本身（应用 EXIF 方向）之间存在不一致？如果图像是单独的，是因为操作系统处理图像显示吗？令人费解的是，这个问题已经存在了将近 10 年，并且没有一个不涉及图像处理（或 JS 操作，它有它自己的问题）的解决方案。

这个问题不是优先事项，并且可能永远不会在现代浏览器中得到纠正，正如 W3.org 所建议的那样：Note that some devices will "tag" an image with some metadata indicating its correct orientation, so image viewing software can do the necessary transformation themselves. Due to legacy compatibility restraints, Web browsers are required to ignore this data by default. A future level of this specification is expected to have a value that applies the metadata-specified transformation automatically.w3.org/TR/css3-images/#image-orientation

不是有什么前缀可以用吗？

【参考方案2】：

更新：从 Chrome 81 开始（于 2020 年 5 月 13 日转为稳定版），img 标签和 backround-image 标签都支持此行为。 https://www.chromestatus.com/feature/6313474512650240

【讨论】：

感谢您的发言！我只是在一个 web 应用程序中遇到了一个问题，其中图像在 IE 和 Firefox 中正确旋转（因为我的代码这样做），但在 Chrome 中，图像现在将被旋转两次 - 在 Chrome 和我们的代码中，这意味着它会没有正确旋转。

好吧，似乎 MDN 弃用了面向图像的 css 属性。developer.mozilla.org/en-US/docs/Web/CSS/image-orientation