bamlab / bamlab/react-native-image-resizer

Apply correct rotation depending on EXIF orientation code

Open
#402 7 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
Java
Stars
1.7k
Forks
362
PR merge metrics
No merged PRs in 30d

Description

**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](https://exiftool.org/TagNames/EXIF.html)

The following array show which EXIF orientation value are & are not properly handled with a rotation of 90°:
![image](https://github.com/bamlab/react-native-image-resizer/assets/9041221/93d4fc1b-0481-40e8-a0cf-1ab52c894fb6)

## 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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.