Exif Orientation Image in React JS

Question

I am using https://www.npmjs.com/package/react-exif-orientation-img package and images doesn't get displayed correctly in react.js

Checked on chrome and mozilla but doesn't seem to work.

image-orientation css property works only in Chrome so using library.

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;

For demo purpose the url of images are hardcoded with different orientations.

Below is the output

Output of all images should look like shown below.

Source Code Download

Steps:

• npm install
• yarn start

Answer 1

Its better to use this plugin: https://github.com/blueimp/JavaScript-Load-Image

yarn add blueimp-load-image

then in your component

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

and use the following code:

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