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

Question

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

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

我想根据每个用例调整代码。

• 浏览器（如：Chrome、Firefox、Safari）。
• 引擎版本（如：webkit版本<13.4，webkit版本>=13.4，等等...）。

我读到 此处 和 此处 认为检测用户代理通常是个坏主意，最好是检测特征的存在。

在我的案例中，该功能在不同的版本中都存在，但不同版本之间的代理行为是不同的？(我想)

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

谢谢，阿夫纳

Answer 1

这是案例，因为默认值的 image-orientation 在最近的浏览器版本中已被更改。

从Chrome 81开始，默认值是 from-image. https:/chromestatus.comfeature6313474512650240。

在iOS系统中，我观察到该值是 from-image 从iOS 13.4开始。

而我使用以下代码来检测默认值。

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
}