react-native-image-resizer icon indicating copy to clipboard operation
react-native-image-resizer copied to clipboard

Apply correct rotation depending on EXIF orientation code

Open taboulot opened this issue 10 months ago • 6 comments

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:

  • Android: ✅
  • iOS: ✅

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 avatar Apr 30 '24 12:04 taboulot