我有一个简单的Web应用程序，其中拍摄了一张照片，该照片在客户端被转换为base64字符串，然后将该字符串发送到数据库，然后通过从数据库中获取它来显示在应用程序上。当我从数据库中获取base64字符串，并使用<img src="data:/png ...">在应用程序中显示该字符串时，它将在iPhone上以正确的方向呈现，但在台式机上却没有呈现。
我的印象是base64字符串不包含有关图像的任何exif数据，那么浏览器如何知道如何在iPhone中显示正确的方向，而不是在桌面上？
此外，假设我确实旋转图像，即根据exif数据将base64字符串转换为base64字符串的旋转版本，然后将其发送到数据库，我是否会弄乱图像的方向iPhone呢？
如何解决这个难题？
答案 0 :(得分：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应用于图像。或者，您也可以使用画布（稍微复杂一点）重绘它