如何检测浏览器引擎版本对图像旋转的处理答案

【问题标题】：How to detect handling of image rotation by the browser engine version如何检测浏览器引擎版本对图像旋转的处理
【发布时间】：2020-06-16 22:10:38
【问题描述】：

我需要根据 exif 图像方向标签正确显示图像。
我在 8 种可能的图像方向选项中为每种情况调整了图像的旋转和翻转（描述 here）
我对here中的图像进行了测试
在 Ubuntu 18.04 上的 Chrome（81.0 版）中，所有图像选项都能正常显示。

在 MacOS 和 iOS 上，我得到不同的行为。有时图像无法正确显示我读到here，行为可能会根据 webkit 浏览器引擎的版本而改变。

我想针对每个用例调整代码：

浏览器（例如 Chrome、Firefox、Safari）
引擎版本（例如 webkit 版本 = 13.4 等...）

我读到here 和here 说检测用户代理通常是个坏主意，最好检测特征的存在

在我的情况下，该功能存在于不同的版本中，但代理的行为在版本之间是不同的？（我认为）

检测图像方向处理（exif imageOrientation 标签的处理）的最佳方法是什么

谢谢，
阿夫纳

【问题讨论】：

标签： cross-browser webkit exif

【解决方案1】：

这是因为image-orientation的默认值在最新版本的浏览器中已更改。

从 Chrome 81 开始，默认值为 from-image。 https://chromestatus.com/feature/6313474512650240

在 iOS 中，我观察到 iOS 13.4 中的值为 from-image。

并且我使用下面的代码来检测默认值。

const getImageOrientation = (): string => {
  const img = document.createElement('img');
  img.style.display = 'none';
  document.body.appendChild(img);
  const imageOrientation = window.getComputedStyle(img).imageOrientation;
  document.body.removeChild(img);
  return imageOrientation;
};

if (getImageOrientation() !== 'from-image') {
  // rotate image
}

【讨论】：