javascript - React JS中的Exif定向图像

Question

我正在使用https://www.npmjs.com/package/react-exif-orientation-img包，并且图像无法在react.js中正确显示

检查了chrome和mozilla，但似乎不起作用。
image-orientation css属性仅在Chrome中有效，因此请使用库。

import React, { Component } from 'react';
import ExifOrientationImg from 'react-exif-orientation-img';
import { Grid, Col, Row } from 'react-bootstrap';

class App extends Component {
  render() {
    const orientations = [1, 2, 3, 4, 5, 6, 7, 8];
    const images = [2];

    return (
      <div>

        <Grid fluid>

         <Row className="show-grid">
            {
              images.map(index =>
                <Col xs={3}>
                  <ExifOrientationImg
                    key={`demo_${index}`} className={'img-responsive'} 
                    src={`https://testexif.blob.core.windows.net/exifimages/${index}.jpg`}
                  />
                </Col>
            )}
          </Row>

          <Row className="show-grid">
            {
              orientations.map(index =>
                <Col xs={3}>
                  <ExifOrientationImg
                    key={`l_${index}`} className={'img-responsive'} 
                    src={`https://testexif.blob.core.windows.net/exifimages/Landscape_${index}.jpg`}
                  />
                </Col>
            )}
          </Row>

        </Grid>
      </div>
    );
  }
}

export default App;

出于演示目的，图像的网址以不同的方向进行了硬编码。

下面是输出



所有图像的输出应如下所示。



Source Code Download

步骤:

npm安装

毛线开始

Answer 1

最好使用此插件:https://github.com/blueimp/JavaScript-Load-Image

yarn add blueimp-load-image

然后在你的组件中

import * as loadImage from 'blueimp-load-image'

并使用以下代码:

const loadImageOptions = { canvas: true }
loadImage.parseMetaData(accepted[0], (data) => {
  if (data.exif && data.exif.get('Orientation')) {
    loadImageOptions.orientation = data.exif.get('Orientation')
  }
  loadImage(accepted[0], (canvas) => {
    accepted[0].preview = canvas.toDataURL(accepted[0].type)
    this.setState({ file: accepted })
  }, loadImageOptions)
})