iOS 旋转照片问题

Question

我已经用 React (CRA) 设置了一个 PWA。当我在 iOS 中上传图片并使用 react-image-crop 裁剪它时，它会横向显示裁剪后的图像，它在所有其他设备（桌面，android）上运行良好。我看到了一些类似的问题，但我真的不明白是什么原因造成的，也不知道如何解决。

任何 help/guidance 将不胜感激。

Answer 1

图像的exif数据可以引起旋转。如果在旋转过程中丢失， iOS 将显示图像 "wrong"。 使用在线exif查看器，旋转并保存图像，检查exif数据是否保留。

Answer 2

我终于解决了这个问题。在获取 blob 的 URL 之前，我使用 blueimp-load-image 将方向设置为 1，这样它就不会根据方向值旋转图片。问题是，它在我的服务器上被旋转保存，它需要覆盖它。

loadImage(
  fileOrBlobOrUrl,
  function (img, data) {
    if (data.imageHead) {
      img.toBlob(function (blob) {
        loadImage.replaceHead(blob, data.imageHead, function (newBlob) {
          // do something with the new Blob object
        })
      }, 'image/jpeg')
    }
  },
  { meta: true, canvas: true, maxWidth: 800 }
)