时间戳

首页 > 解决方案 > 输入类型=“文件”上的图像旋转

javascript - 输入类型=“文件”上的图像旋转

问题描述

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

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

下面是一个使用 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;

标签： javascriptreactjsorientationexif

解决方案

你应该看看现代的 JavaScript 库JavaScript-Load-Image，它已经有一个完整的 EXIF 方向解决方案，包括auto-fix。

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

看看Fix image orientation with Javascript。

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

推荐阅读