时间戳

首页 > 解决方案 > react-image-crop 图像旋转问题仅在 iPhone 的纵向模式下

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

问题描述

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

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

这是创建者本人的一个代码框。

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

示例问题

标签： javascriptreactjscanvashtml5-canvas

解决方案

需要加载一个额外的库：

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]);
    }
  };

这是代码沙箱中的一个工作示例

推荐阅读