为什么iPhone会显示正确的图像方向,而台式机无法显示?

问题描述 投票:0回答:1

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

我给base64字符串不包含有关图像的任何exif数据的印象,因此浏览器如何知道如何在iPhone中而不在桌面上显示正确的方向?

此外,假设我确实旋转图像,即,根据exif数据将base64字符串转换为base64字符串的旋转版本,然后将其发送到数据库,我是否会弄乱iPhone上的方向然后?

如何解决这个难题?

javascript iphone image desktop exif
1个回答
0
投票

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

为了旋转,您将需要一个可以提取该元数据的库。

exifr的速度很快,可以处理数百张照片,而不会导致浏览器崩溃或花费很长时间:)。另外,还有简洁的API,您可以向其中提供几乎所有内容-元素,URL,Buffer,ArrayBuffer,甚至base64 url​​或字符串等等。

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

这将为您提供1到8之间的整数(了解有关these values here的更多信息,并将transform:rotate应用于图像)。或者,您可以使用画布重画它(这有点复杂)

© www.soinside.com 2019 - 2024. All rights reserved.