javascript - 来自 AWS S3 存储桶的图像在 React App 中旋转

Question

我有一个应用程序，用户可以在其中拍摄照片并将图像存储在 AWS S3 存储桶中。然后，我的应用程序将保存图像的 URL，以便用户稍后可以查看图像。如果我转到我的 S3 存储桶并查看图像，它会以正确的方向显示。但是，当我在我的 React 应用程序中使用图像的 URL 时，图像看起来旋转了 90 度。

拍摄图像时，会立即声明文件名，并立即将图像的 URL 保存到数据库中。由于当我直接转到 S3 存储桶或 URL 时图像不会出现旋转，我假设问题必须与我尝试访问 S3 存储桶的方式有关。

当我的应用程序尝试访问 S3 存储桶时，这是唯一使用的代码:

<CardMedia 
    className={classes.img}
    image={this.props.url}
 />

其中 this.props.url 是拍摄图像时存储的 URL。

我真的不明白为什么图像会旋转，因为这里使用的代码很少。

Answer 1

实际图像是横向的，宽度为 4032，高度为 3024。它的 EXIF 元数据表明:

Orientation: rotate 90

某些照片查看器(包括当您直接在 Chrome 中调出图像文件时)对此表示尊重，但 <img> 并不尊重标签。

相关问题:

• > img tag displays wrong orientation
• > JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
• > Accessing JPEG EXIF rotation data in JavaScript on the client side

在 Firefox 中，这个非常简单的解决方案(提到 here)有效:

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  render() {
    return (
      <img
        style={{ maxWidth: "400px", imageOrientation: "from-image" }}
        src="https://beerphotos.s3.us-east-2.amazonaws.com/5_1562813789722"
      />
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);