我有一个简单的Web应用程序,其中一个人拍摄了一张照片,该照片在客户端被转换为base64字符串,然后将该字符串发送到数据库,然后通过从数据库中获取该字符串来显示在应用程序上。当我从数据库中获取base64字符串,并使用<img src="data:/png ...">
将其显示在应用程序中时,它将在iPhone上以正确的方向呈现,但在桌面上却没有呈现。
我给base64字符串不包含有关图像的任何exif数据的印象,因此浏览器如何知道如何在iPhone中而不在桌面上显示正确的方向?
此外,假设我确实旋转图像,即,根据exif数据将base64字符串转换为base64字符串的旋转版本,然后将其发送到数据库,我是否会弄乱iPhone上的方向然后?
如何解决这个难题?
问题是照片被旋转并且嵌入了带有有关旋转信息的元数据。一些应用程序可以读取元数据并旋转照片。而仅将照片添加为<img>
并不能做到这一点。
为了旋转,您将需要一个可以提取该元数据的库。
exifr的速度很快,可以处理数百张照片,而不会导致浏览器崩溃或花费很长时间:)。另外,还有简洁的API,您可以向其中提供几乎所有内容-元素,URL,Buffer,ArrayBuffer,甚至base64 url或字符串等等。
exifr.orientation(file).then(val => {
console.log('orientation:', val)
})
这将为您提供1到8之间的整数(了解有关these values here的更多信息,并将transform:rotate
应用于图像)。或者,您可以使用画布重画它(这有点复杂)