为什么 iPhone 显示正确的图像方向而桌面却没有？

Question

我有一个简单的 Web 应用程序，其中拍摄照片，在客户端将其转换为 base64 字符串，然后将该字符串发送到数据库，然后通过从数据库中获取它来显示在应用程序上。当我从数据库中获取 base64 字符串并使用 <img src="data:/png ..."> 在应用程序中显示它时，它会在 iPhone 上以正确的方向呈现，但不会在桌面上呈现。

我的印象是 base64 字符串不包含任何关于图像的 exif 数据，那么浏览器如何知道如何在 iPhone 中而不是在桌面上显示正确的方向？

另外，假设我确实旋转了图片，即根据exif数据将base64字符串转换为base64字符串的旋转版本，然后将其发送到数据库，我会不会弄乱了方向那么 iPhone 呢？

如何解决这个难题？

Answer 1

问题是照片被旋转并且嵌入了包含旋转信息的元数据。一些应用程序可以读取元数据并旋转照片。而简单地将照片添加为<img> 并不能做到这一点。

对于旋转，您需要一个可以提取元数据的库。

exifr 速度很快，可以处理数百张照片而不会导致浏览器崩溃或花费很长时间:)。此外，还有简洁的 API，您可以为它提供几乎任何东西 - 元素、URL、缓冲区、ArrayBuffer，甚至是 base64 url​​ 或字符串等等。

exifr.orientation(file).then(val => {
  console.log('orientation:', val)
})

这会为您提供一个从 1 到 8 的整数（了解有关 these values here 的更多信息）并将 transform:rotate 应用于图像。或者你可以使用画布重绘它（这有点复杂）