bamlab / react-native-image-resizer

🗻 Resize local images with React Native
MIT License
1.58k stars 337 forks source link

Apply correct rotation depending on EXIF orientation code #402

Closed taboulot closed 1 week ago

taboulot commented 2 months ago

Describe the bug On some images, the 90 degree rotation is not correctly applied (or any other rotation).

To Reproduce Steps to reproduce the behavior:

  1. In the example app, in function resize put a value of 90 in rotation parameter
  2. Build the example application;
  3. Select an image with a EXIF orientation code = 4 (see explanation below)
Observed behavior original result
image image
Expected behavior original result
image image

Platform concerned:


Details

Current behavior

Before applying any transformation to the image, the library do two things:

  1. Load the bitmap image = a grid of dots or pixels that forms an image = raw image of the camera sensor
  2. Get the orientation of that image following the EXIF orientation code;
  3. Add the rotation if parameter is specified;
  4. Apply the rotation to the bitmap;
  5. Apply the resizing to the bitmap;
  6. Save the new image.

Problem

We do not handle properly all EXIF Orientation code. In the case of an Orientation code = 4 (i.e Mirror vertical), the getOrientation method returns 0, which is correct, but we do not apply a vertical flip on the bitmap before applying the desired rotation.

The EXIF Orientation code tells to the device how the image (orientation + flip) should be displayed on the screen (i.e. how the bitmap should be displayed) => more information about each value here

The following array show which EXIF orientation value are & are not properly handled with a rotation of 90°: image

Proposition of algorithm

  1. Load the bitmap image = a grid of dots or pixels that forms an image = raw image of the camera sensor
  2. Get the orientation of that image following the EXIF orientation code;
  3. Get the flip (horizontal, vertical or none) of that image following the EXIF orientation code;
  4. Apply the rotation to the bitmap;
  5. Apply the flip to the bitmap;
  6. Apply the rotation if parameter is specified;
  7. Apply the resizing to the bitmap;
  8. Save the new image.
taboulot commented 2 months ago

I do not have at the moment any time to implement it. Any help is welcome.

retyui commented 2 months ago

you can find more images with Exif for testing https://github.com/recurser/exif-orientation-examples

stale[bot] commented 2 weeks ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] commented 1 week ago

This issue has been automatically closed. Thank you for your contributions.