时间戳

首页 > 解决方案 > 如何检测浏览器引擎版本对图像旋转的处理

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

问题描述

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

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

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

我在这里和这里读到，检测用户代理通常是一个坏主意，最好检测功能的存在

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

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

谢谢，
阿夫纳

标签： cross-browserwebkitexif

解决方案

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

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

在 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
}

推荐阅读