【问题标题】: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 }
)

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-09-06
    • 1970-01-01
    • 2018-07-21
    • 1970-01-01
    相关资源
    最近更新 更多