iOS旋转照片问题答案

【问题标题】：iOS rotate photo issueiOS旋转照片问题
【发布时间】：2020-05-03 22:09:37
【问题描述】：

我已经使用 React (CRA) 设置了 PWA。当我在 iOS 中上传图片并使用react-image-crop 对其进行裁剪时，它会横向显示裁剪后的图像，它在所有其他设备（台式机、安卓）上都能正常工作。我看到了一些类似的问题，但我无法真正理解是什么原因造成的以及如何解决它。

任何帮助/指导将不胜感激。

【问题讨论】：

图片是PNG吗？我记得自己也遇到过类似的问题，这就是解决方案：stackoverflow.com/questions/10850184/… 抱歉，这是 UIKit 的答案，而不是 React。但它可能仍然有帮助。
不，我不认为扩展在这个：/。编辑：这仅在裁剪后发生。

标签： javascript ios reactjs image react-image

【解决方案1】：

图像的exif数据可以诱导旋转。如果在旋转过程中丢失， iOS 将显示图像“错误”。使用在线 exif 查看器，旋转并保存图像，然后检查 exif 数据是否保留。

【讨论】：

使用和 exif 查看器我得到了方向：旋转 180。如果我旋转并保存图像，则方向标签不再存在并且图像按预期上传。你有什么想法是处理这个问题的最佳方法吗？
遗憾的是我对 React 生态系统不太熟悉。所以我不能命名库。但是你需要一个 n exif 库。然后你读出方向，处理图像，然后写回。
我处理了它并解决了一些问题。但是，实时图像仍然会发生这种情况，它们似乎没有方向标签

【解决方案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 }
)

【讨论】：