Images taken from camera being rotated 90 degrees counter-clockwise

[luizaugustoventura]

Current behavior

Whenever I compress an image taken straight from the camera (in portrait mode) the image gets rotated 90 degrees counter-clockwise after compressed. This happens on the physical device (in my case, a Samsung Galaxy S10 Lite), but not on the Android Emulator.

I am using react-native-image-picker (version 4.7.3) to take the images and then compressing them using react-native-compressor before upload. Using react-native-image-picker itself does not rotate the image. The problem occurs specifically on android after I use the compressor to compress the image taken from react-native-image-picker. Here is the code:

import { Image as ImageCompressor } from 'react-native-compressor';
import { launchCamera } from 'react-native-image-picker';

addImageFromCamera = async () => {
    const result = await launchCamera({
        mediaType: 'photo',
        saveToPhotos: true,
    });

    if (result.didCancel) {
        return;
    }

    const compressedImage = await ImageCompressor.compress(result.assets[0].uri, { autoCompress: true });

    return compressedImage;
}

The output is great! The image's size is significantly reduced and the quality is still good. It is just the orientation issue bothering the users on Android(only).

Expected behavior

Compress the image keeping its original orientation.

Platform

• [X] Android

React Native Version

0.61.5

React Native Compressor Version

0.5.17

Reproducible Steps And Demo

• Using an Android physical device, take an image from camera using react-native-image-picker (lauchCamera())
• Pass the output result to react-native-compressor using the auto compression (Image.compress(Image_URI_Here, { autoCompress: true }))
• Check the result on the React Native's Image component or look into your phone's file manager to see if the image had its orientation changed from portrait to landscape.

[github-actions[bot]]

👋 @luizaugustoventura Thanks for opening your issue here! If you find this package useful hit the star🌟!

[luizaugustoventura]

Just noticed something! The issue seems to be related with Samsung cameras. Just tested on a Motorola and image did not get rotated.

Is there any configuration I can do to my phone's camera to get this right?

[iphonic]

Just noticed something! The issue seems to be related with Samsung cameras. Just tested on a Motorola and image did not get rotated.

Is there any configuration I can do to my phone's camera to get this right?

Don't think it's only Samsung, I am checking it on OnePlus, same. it rotates.

[Nekuin]

Check out the issues on react-native-image-picker regarding rotation stuff, I have a feeling this library doesn't do anything to the rotation. I've had struggles with this exact same issue, and it doesn't help that the image gallery shows the picture in the "correct rotation" while it's sideways somewhere else. You can also try to look into EXIF data of the image, which should contain information about the images orientation.

Hope any of this helps and good luck!

[luizaugustoventura]

Check out the issues on react-native-image-picker regarding rotation stuff, I have a feeling this library doesn't do anything to the rotation. I've had struggles with this exact same issue, and it doesn't help that the image gallery shows the picture in the "correct rotation" while it's sideways somewhere else. You can also try to look into EXIF data of the image, which should contain information about the images orientation.

Hope any of this helps and good luck!

Well, you know what's even more curious? I went to the Microsoft Teams website and tried to update my profile picture with a photo I've sent from my Samsung phone via Bluetooth. And guess what...... the photo got rotated there as well. Now I'm really starting to think it's something related to the picture's metadata or something of this nature.

How do you look into the EXIF data of the image? I don't know any means to do that, as it is in the native Java code in node_modules.

[Nekuin]

Check out the issues on react-native-image-picker regarding rotation stuff, I have a feeling this library doesn't do anything to the rotation. I've had struggles with this exact same issue, and it doesn't help that the image gallery shows the picture in the "correct rotation" while it's sideways somewhere else. You can also try to look into EXIF data of the image, which should contain information about the images orientation. Hope any of this helps and good luck!

Well, you know what's even more curious? I went to the Microsoft Teams website and tried to update my profile picture with a photo I've sent from my Samsung phone via Bluetooth. And guess what...... the photo got rotated there as well. Now I'm really starting to think it's something related to the picture's metadata or something of this nature.

How do you look into the EXIF data of the image? I don't know any means to do that, as it is in the native Java code in node_modules.

Looking at the react-native-image-picker options you can get the exif data with the image you take with the camera or select from image library by setting includeExtra as true. Copy pasting a bit of your code here as an example: const result = await launchCamera({ mediaType: 'photo', saveToPhotos: true, includeExtra: true });

[sadeghhosseini]

I believe the problem is with metadata of the image being deleted during the compression, I had the same problem with sharp library which got resolved using withMetadata() method, which reserved the metadata of the image. Does this library have a similar option for reserving metadata?

[uniquejava]

+1, rotation happens on my colleague's Xiaomi K40S but not on my K50.

[puckj]

I'm still facing the same issue. (tested on iPhone 6)

[Marcuspo]

+1

[hotaryuzaki]

i have same issue, and it's ordinary upload from file with portrait orientation. i try in 2 devices, Oneplus okay but Samsung. i think the problem from metadata of the image in the device.

any solution?

[hb-webdev]

Looking forward to fixing rotating images on Android (presumably caused by deleted metadata)

[jeemercado]

Looking forward to a fix. After investigation it's probably due to losing the "orientation" data after compression on Android.

[fakfa19]

If someone use react-native-image-crop-picker please check this issue https://github.com/ivpusic/react-native-image-crop-picker/issues/1696#issuecomment-1183505899

[luizaugustoventura]

Check out the issues on react-native-image-picker regarding rotation stuff, I have a feeling this library doesn't do anything to the rotation. I've had struggles with this exact same issue, and it doesn't help that the image gallery shows the picture in the "correct rotation" while it's sideways somewhere else. You can also try to look into EXIF data of the image, which should contain information about the images orientation. Hope any of this helps and good luck!

Well, you know what's even more curious? I went to the Microsoft Teams website and tried to update my profile picture with a photo I've sent from my Samsung phone via Bluetooth. And guess what...... the photo got rotated there as well. Now I'm really starting to think it's something related to the picture's metadata or something of this nature. How do you look into the EXIF data of the image? I don't know any means to do that, as it is in the native Java code in node_modules.

Looking at the react-native-image-picker options you can get the exif data with the image you take with the camera or select from image library by setting includeExtra as true. Copy pasting a bit of your code here as an example: const result = await launchCamera({ mediaType: 'photo', saveToPhotos: true, includeExtra: true });

Perfect solution, working nicely on the aforementioned Samsung device 🤩️🤩️🤩️

I'm sorry for the late answer. I moved to another company and no longer had access to the code attached above. But I tested your solution in the following environment:

Platform

• [x] Android 12

React Native Version

0.70.6

React Native Compressor Version

1.6.1

React Native Image Picker Version

5.0.1

Everything worked exactly as I expected, so thank you so much for your answer and once again sorry for being so late. As I said, I'm no longer working on that project.

The only problem I faced is a compatibility issue with some of the latest React Native versions. I had to follow this workaround on #132. Otherwise, a runtime error would happen.

[numandev1]

🙏 sorry for a long ago I was not maintaining due to the huge office workload, hopefully, I am going to start fixing bugs on a weekend basis, I will fix at least 2 issues on the weekend, for priority bugs you can join the discord channel https://discord.gg/dtYzk8sp where we can discuss which bug is most important

[numandev1]

@luizaugustoventura @jeemercado @fakfa19 @hb-webdev @iphonic do you have any device where it is reproducible i wanna fix it by testing it on your device

[hb-webdev]

@numandev1 I think it's reproducible on any android phone. I have one that I could test on. Should I use #170 and test?

[numandev1]

@hb-webdev If it is reproducible on your side then we can test it on Zoom or Teamviewer and fix it as it is not reproducible on my side

[numandev1]

is anyone having this issue on his mobile device, if yes then we can both debug this issue on Zoom?👀

[hb-webdev]

i'll try to reproduce soon on latest RN and let you know

[numandev1]

@hb-webdev ?

[hb-webdev]

I'm unable to replicate the issue. The original and compressed images are both oriented the same on my Galaxy S9. They used to rotate 90 degrees on the same device after compression

I might have been using React Native Camera before, but now I am using React Native Vision Camera. Maybe that affects it...

I will try again with React Native Image Picker like OP used

[hb-webdev]

The rotation does not occur with RN 0.72 + RN Image Picker (5.0.2).

The rotation used to happen on my Galaxy S9 from this compression module, but no longer with RN Vision Camera or RN Image Picker on RN 0.72...

I think this might be able to be considered resolved for now

[numandev1]

@hb-webdev thanks a lot ❤❤

[luisresendiz0]

+1 "react-native-image-picker": "^4.10.3" "react-native-compressor": "^1.6.1"

[numandev1]

@luisresendiz0 can you check the latest version?

[luisresendiz0]

Yep, It's the first thing I thought of. They are already updated but the issue continues.

I'm currently on:

"react-native-compressor": "^1.8.21",
"react-native-image-picker": "^7.0.2",

And my code includes includeExtra: true prop:

try {
      const result = await launchCamera({
        mediaType: 'photo',
        presentationStyle: 'fullScreen',
        saveToPhotos: true,
        includeExtra: true
      });

      if (!result.assets) {
        throw new Error(
          result.errorMessage || 'No se obtuvieron imagenes de la camara',
        );
      }

      const asset = result.assets[0];

      console.log("asset", asset);

      const uri = await ImageCompressor.compress(`${asset.uri}`, {
        compressionMethod: 'auto'
      });

Issue:

https://github.com/numandev1/react-native-compressor/assets/80994311/f7e7d155-3633-4606-a46e-a7b0a894b464

@luisresendiz0 can you check the latest version?

[numandev1]

@luisresendiz0 can you check 1.8.22 new version?

[talaikis]

+1

"react-native-compressor": "1.8.x-1,8.23", "react-native-image-picker": "7.1.0",