rricard / react-exif-orientation-img

NOT MAINTAINED ANYMORE - img element wrapper component for React that understands EXIF orientation information and corrects it using CSS transforms.

NOT MAINTAINED ANYMORE Please reach out in an issue if you wish to maintain this.

react-exif-orientation-img

img element wrapper component for React that understands EXIF orientation information and corrects it using CSS transforms.

Installation

npm install --save react-exif-orientation-img
# or
yarn add react-exif-orientation-img

Usage

Instead of using an img element, use this component instead:

import React from 'react';
import ExifOrientationImg from 'react-exif-orientation-img'

const MyComponent = () =>
  <ExifOrientationImg
    src="https://github.com/recurser/exif-orientation-examples/blob/master/Portrait_8.jpg?raw=true"
    alt="A waterfall"
  />

All properties will be cleanly passed to the img element including style and onLoad that this component uses under the hood. However, keep in mind that you should be aware that width/height and other dimension manipulations may not work as expected.

Development

yarn is preferred to work with this project.

Dev server

Just start a server with yarn start.

react-exif-orientation-img's Issues

Question: onLoad not working?

I pass onLoad to the component, but it does not work. Curious if this is passed through to the underlying img component?

Using like this:

import Img from "react-exif-orientation-img";

 ...

return (
      <Box>
        <Img
          style={{ maxWidth: "100%", maxHeight: "100%", display: "block" }}
          className="EntryImage"
          src={finalURL}
          alt="url"
          onLoad={event => {
            console.log("Image loaded", event);
          }}
        />
      </Box>
    );

Having problem correcting orientation

Hi,
Hope you guys are well, having trouble in correcting orientation of the image. This is the image image applied as per react-exif-orientation-img but it always come rotated. Any help will be greatly appreciated thanks.

Images doesn't display as per orientation

I am loading the images from server. For testing purpose few images are uploaded.
Checked on chrome and mozilla but doesn't seem to work.

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.

Add behavioral/lifecycle tests via jest

Our component is responsible for passing a few props to the img element, we should ensure it does that correctly.

Problem width correct orientation

in process of using your component i have had a problem. I have loading images in my app. I have two localhost for frontend and backend. Also There is a download through frontend side and then image are download through server side at localhost folder. When I download image through frontend side image have normal orientation (exif reading correctly). But when image have downloaded in backend localhost folder it haven't normal orientation, file in this directory have exif metadata, so in browser image isn't displayed correctly.

Switch/eject to a manual build process

As of now, the distributed source is the vanilla source code before any babel transform (including JSX and Flow). This could raise a few problems later on so we should do the build ourselves instead of Create React App.

Skip transformation if already applied

Orientation is automatically respected if:

• CSS image-orientation: from-image is specified and the browser supports it (Firefox at time of writing)
• always on iOS Safari

In these cases, we should avoid further altering the orientation.

Does nt work constantly

Wrap the component in a container to avoid the weird behavior created by the css transform

We may need to define an optional API to configure this wrapper.

After rotating image, it doesn't fit the parent

Hey! Great library, however I have an issue:

I have the image in it's full resolution, and I want it to fit it's parent, so I have:

<ExifOrientationImg
src={'foo'}
style={{maxWidth: '100%', maxHeight: '100%', display: 'block'}}
/>

so when I use the ExifOrientationImg component it gets correctly rotated, however the problem is that, after the rotation, it no longer adheres to the parent width and height, but overflows it completely... I could write some code to swap the values, except then I need to detect the orientation manually again, at which point I would no longer need this library.

The ideal solution would be the image swaps the values automatically or worst case scenario add a callback with the detected orientation so users can swap max values on their own.

Cheers!

Setup some CI checks

We need to ensure a stable build as soon as possible

Add screenshot testing via a Selenium-like test-runner

We need to ensure stable visual behavior of the component. Using a screenshot-based solution is important when manipulating images.

Does not work on iOS devices

Package dont work on iOS devices such as iphone / ipad because device return image in good orientation but package rotate it because in exif it say so.
Anyone have handle for this?