输入类型=“文件”时的图像旋转

Question

我正在使用react-firebase-file-uploader将头像上传到firebase存储。但是，每当我上传Portrait Orientation图像（特别是在Android和IOS设备上拍摄的图像 - 它们的元数据中往往会有OrientationRotate 90 CW）时，图像会旋转90度。

我以前读过这个，我相信这些拍摄的智能手机图像总是在横向，但方向存储在EXIF元。如果我弄错了，请纠正我？

下面是使用react-firebase-file-uploader上传图像的组件示例 - 我知道这个包不是问题，这个问题的解决方案可能适用于许多应用程序。

那么，我需要做什么来阅读EXIF方向，更改轮换（如果需要，或者我需要通过文件上传传递元数据？）并继续上传？

class ProfilePage extends Component {
  state = {
    avatar: "",
    isUploading: false,
    progress: 0,
    avatarURL: ""
  };

  handleProgress = progress => this.setState({ progress });
  handleUploadError = error => {
    this.setState({ isUploading: false });
    console.error(error);
  };
  handleUploadSuccess = filename => {
    this.setState({ avatar: filename, progress: 100, isUploading: false });
    firebase
      .storage()
      .ref("images")
      .child(filename)
      .getDownloadURL()
      .then(url => this.setState({ avatarURL: url }));
  };

  render() {
    return (
      <div>
        <form>
          {this.state.isUploading && <p>Progress: {this.state.progress}</p>}
          {this.state.avatarURL && <img src={this.state.avatarURL} />}
          <FileUploader
            accept="image/*"
            name="avatar"
            randomizeFilename
            storageRef={firebase.storage().ref("images")}
            onUploadStart={this.handleUploadStart}
            onUploadError={this.handleUploadError}
            onUploadSuccess={this.handleUploadSuccess}
            onProgress={this.handleProgress}
          />
        </form>
      </div>
    );
  }
}

export default ProfilePage;

Answer 1

你应该看一下现代的javascript库JavaScript-Load-Image已经有一个完整的EXIF方向解决方案，包括自动修复。

您可以使用图像缩放（.scale()方法）将图像转换为画布并修复图像方向。

看看Fix image orientation with Javascript。

这是另一个有趣的库：react-exif-orientation-img

Answer 2

在这里，解决方案@German Plebani的改编措施在评论中满足您的需求：

import React, {Component} from "react";
import FileUploader from "react-firebase-file-uploader";
import exif from 'exif-js';

function readFile(file) {
  return new Promise(resolve => {
    var reader = new FileReader();
    reader.onload = e => resolve(e.target.result);
    reader.readAsDataURL(file);
  });
};

function createImage(data) {
  return new Promise(resolve => {
    const img = document.createElement('img');
    img.onload = () => resolve(img);
    img.src = data;
  })
}

function rotate(type, img) {
  return new Promise(resolve => {
    const canvas = document.createElement('canvas');

    exif.getData(img, function () {
      var orientation = exif.getAllTags(this).Orientation;

      if ([5, 6, 7, 8].indexOf(orientation) > -1) {
        canvas.width = img.height;
        canvas.height = img.width;
      } else {
        canvas.width = img.width;
        canvas.height = img.height;
      }

      var ctx = canvas.getContext("2d");

      switch (orientation) {
        case 2:
          ctx.transform(-1, 0, 0, 1, img.width, 0);
          break;
        case 3:
          ctx.transform(-1, 0, 0, -1, img.width, img.height);
          break;
        case 4:
          ctx.transform(1, 0, 0, -1, 0, img.height);
          break;
        case 5:
          ctx.transform(0, 1, 1, 0, 0, 0);
          break;
        case 6:
          ctx.transform(0, 1, -1, 0, img.height, 0);
          break;
        case 7:
          ctx.transform(0, -1, -1, 0, img.height, img.width);
          break;
        case 8:
          ctx.transform(0, -1, 1, 0, 0, img.width);
          break;
        default:
          ctx.transform(1, 0, 0, 1, 0, 0);
      }

      ctx.drawImage(img, 0, 0, img.width, img.height);
      ctx.toBlob(resolve, type);
    });
  })
}


class OrientationAwareFirebaseImageUploader extends Component {
  handleChange = (event) => {
    event.target.files.forEach(
      file => readFile(file)
        .then(createImage)
        .then(rotate.bind(undefined, file.type))
        .then(blob => {
          blob.name = file.name;
          this.uploader.startUpload(blob);
        })
    );
  }

  render() {
    return (
      <FileUploader
        {...this.props}
        ref={ref => this.uploader = ref}
        onChange={this.handleChange}
        accept="image/*"
      />
    );
  }
}

export default OrientationAwareFirebaseImageUploader;