Safari Mobile 中的 EXIF 方向问题
EXIF Orientation Issue in Safari Mobile
我在生产环境中有一个 angular 2 应用程序，允许您选择个人资料图片。最近，使用 safari mobile 进行测试，特别针对 IOS 13.3.1 版本（旧）和 IOS 13.4.1（新）版本。我注意到图像根据使用的 safari 浏览器版本旋转显示 (I built a stackblitz for this that you can review):
IOS 13.3.1 版本（旧）
IOS 13.4.1（新）
当我从 iPhone 的肖像模式拍摄图像并将图像上传到我的应用程序时，它显示 旋转仅适用于 IOS 13.3.1 版本（较旧)。然而，我检查了我每台设备的 EXIF 元信息图像，发现两张图像在 属性:
方向上具有相同的值
IOS 13.3.1 版本（旧）
IOS 13.4.1（新）
我的问题是。为什么图像显示会根据 IOS 版本而变化，知道在这两种情况下方向 EXIF 是相同的值 (6)？
这是一个让我担心的问题，因为我已经通过根据 EXIF 方向值旋转图像以使其正确显示来解决这个问题（例如 exif.js 已经创建来通过检测 exif 来处理这种情况orientation flag），但是这个问题现在又出现在新版本的 IOS 中。什么是我可以用来使其随着时间的推移可持续发展的代码示例？浏览器在管理图像方向方面没有达成共识吗？
如何解释这种不合逻辑的行为？
非常感谢！
webkit 浏览器会在您根据 EXIF 数据上传图像之前旋转图像，然后您的应用会再次应用它。我们能够在 Chrome 的新 (81) 版本和 13.4 上的 Mobile Safari 上确认这一点。然后应用程序进一步旋转它们并且它变得扭曲。
当我们的手机突然表现不同时，我们也偶然发现了这个问题，最终找到了根本原因。
WebKit (iOS) 和 Android (Chrome) 最近都更改了 image-orientation CSS 属性的默认行为。之前是 none，现在是 from-image。这意味着：以前，他们默认忽略图像的 EXIF 数据，而现在他们使用它来自动更正图像。这打破了我们基于 exifreader 库的自动更正。
以下是一些相关链接：
有趣的是，Slack 团队似乎也 运行 参与其中：
幸运的是，exifreader 库的作者（几周后 运行 遇到了同样的问题）也指导我找到了一种检测行为的方法。你可以在这里找到他的答案：
我还注意到 Modernizr 对此进行了测试，所以我现在实际上正在使用自定义 modernizr 构建来检测浏览器行为。
我在生产环境中有一个 angular 2 应用程序，允许您选择个人资料图片。最近，使用 safari mobile 进行测试，特别针对 IOS 13.3.1 版本（旧）和 IOS 13.4.1（新）版本。我注意到图像根据使用的 safari 浏览器版本旋转显示 (I built a stackblitz for this that you can review):
IOS 13.3.1 版本（旧）
IOS 13.4.1（新）
当我从 iPhone 的肖像模式拍摄图像并将图像上传到我的应用程序时，它显示 旋转仅适用于 IOS 13.3.1 版本（较旧)。然而，我检查了我每台设备的 EXIF 元信息图像，发现两张图像在 属性:
方向上具有相同的值IOS 13.3.1 版本（旧）
IOS 13.4.1（新）
我的问题是。为什么图像显示会根据 IOS 版本而变化，知道在这两种情况下方向 EXIF 是相同的值 (6)？
这是一个让我担心的问题，因为我已经通过根据 EXIF 方向值旋转图像以使其正确显示来解决这个问题（例如 exif.js 已经创建来通过检测 exif 来处理这种情况orientation flag），但是这个问题现在又出现在新版本的 IOS 中。什么是我可以用来使其随着时间的推移可持续发展的代码示例？浏览器在管理图像方向方面没有达成共识吗？
如何解释这种不合逻辑的行为？
非常感谢！
webkit 浏览器会在您根据 EXIF 数据上传图像之前旋转图像，然后您的应用会再次应用它。我们能够在 Chrome 的新 (81) 版本和 13.4 上的 Mobile Safari 上确认这一点。然后应用程序进一步旋转它们并且它变得扭曲。
当我们的手机突然表现不同时，我们也偶然发现了这个问题，最终找到了根本原因。
WebKit (iOS) 和 Android (Chrome) 最近都更改了 image-orientation CSS 属性的默认行为。之前是 none，现在是 from-image。这意味着：以前，他们默认忽略图像的 EXIF 数据，而现在他们使用它来自动更正图像。这打破了我们基于 exifreader 库的自动更正。
以下是一些相关链接：
有趣的是，Slack 团队似乎也 运行 参与其中：
幸运的是，exifreader 库的作者（几周后 运行 遇到了同样的问题）也指导我找到了一种检测行为的方法。你可以在这里找到他的答案：
我还注意到 Modernizr 对此进行了测试，所以我现在实际上正在使用自定义 modernizr 构建来检测浏览器行为。