react-image-crop 图像旋转问题仅在 iPhone 的纵向模式下

Question

我正在使用react-image-crop 库让用户选择一张图片并对其进行裁剪。

在您使用 iPhone 之前，该库运行良好。拍摄肖像（又名垂直）照片时，在画布上裁剪时图像处于正确的旋转位置，但完全处于错误的方向。

这是来自创作者本人的codesandbox。

问题 下面是一个图像，在顶部，裁剪部分，图像方向正确，但底部的输出图像方向错误。

Answer 1

需要加载一个额外的库：

npm i blueimp-load-image --S

将其加载到您的页面中

import loadImage from "blueimp-load-image/js";

而不是使用 fileReader，而是像这样使用库：

  onSelectFile = e => {
    if (e.target.files && e.target.files.length > 0) {
      loadImage(
        e.target.files[0],
        img => {
          var base64data = img.toDataURL(`image/jpeg`);
          this.setState({ src: base64data });
        },
        { orientation: true, canvas: true }
      );

      // const reader = new FileReader();
      // reader.addEventListener('load', () =>
      //   this.setState({ src: reader.result })
      // );
      // reader.readAsDataURL(e.target.files[0]);
    }
  };

这是codesandbox中的一个工作示例