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 install
纱线开始

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

React JS中的Exif Orientation图像

1 个答案: