React-native-image-picker: [Android] Image rotated 90 degrees

[woodpav]

I am using ImagePicker.showImagePicker to take a photo. iOS outputs a correctly orientated image. On Android, the image is rotated 90 degrees. I am taking a picture using a Google Pixel API 25 Simulator. The simulator is in portrait mode.

This is the relevant part of response

{
  height: 480,
  isVertical: true,
  originalRotation: 0,
  width: 640
}

isVertical: true but the height and width are switched (so rotated 90 degrees).

Related #199 #388

[vinicivs-monteiro]

Im also having this problem. response.originalRotation returns 90 only when I take a picture, even passing rotation: 0... from gallery works fine

[awitherow]

We are also having this problem on Samsung Galaxy S7 Edge.

[awitherow]

I don't think your backend/server stuff is related to this @galeto ? instead we need to look at why Android is doing this.

[xiaoleiooo]

photos right, rotate 90 when use camera

[awitherow]

@yfuks @marcshilling I have noticed you were looking into this PR which might be related https://github.com/react-community/react-native-image-picker/issues/199

I was wondering if you have any thoughts on this issue?

We are experiencing this on our application with

React-Native 0.46.4,
React 16.0.0-alpha.12
React-Native Image-Picker 0.26.3

on devices such as Samsung Galaxy S7 Edge

• Android 7.0
• Kernel version 3.18.14-11528205.

[awitherow]

@yfuks @marcshilling any thoughts?

[marcshilling]

@awitherow I'm not super familiar with the Android side of the repo/am not actively maintaining this anymore. I'd be happy to help get a pull request merged if there is one.

[konradkierus]

@awitherow we've observed the similar behavior on Samsung Galaxy S7 but I don't think this is a bug.
Please note that image is rotated but it has proper EXIF data, if you try to open it on GIMP (for example) then it will ask you if you want to have the image opened as it is or take EXIF data into consideration. And EXIF data may contain information about image orientation (rotation).
All image browsers, including web browsers, should take EXIF data into consideration and from my observations they do.
Unless this is something else and you lost somewhere the EXIF data, for example during resizing the image or creating a thumbnail of it on the backend, it depends on your use case.

[JonoH]

As a work around I'm using the react-native-image-resizer library to rotate the image 90 degrees if the originalRotation prop exists and has a value of 90.

[Monte9]

@JonoH your solution works for me. Although one thing to note is that when taking images with the front camera (selfie), the rotation is 270.

Hence here is what I ended up with in case it helps someone:
(react-native-image-picker + react-native-image-resizer)

const IMAGE_PICKER_OPTIONS = {
  title: 'Select a photo',
  mediaType: 'photo',
  noData: true
}

ImagePicker.launchCamera( IMAGE_PICKER_OPTIONS, response => {
  const { error, uri, originalRotation } = response

  if ( uri && !error ) {
    let rotation = 0

    if ( originalRotation === 90 ) {
      rotation = 90
    } else if ( originalRotation === 270 ) {
      rotation = -90
    }

    ImageResizer.createResizedImage( uri, 800, 600, "JPEG", 80, rotation ).
      then( ( { uri } ) => {
        this.setState( { uri } )
      } ).catch( err => {
        console.log( err )

        return Alert.alert( 'Unable to resize the photo', 'Please try again!' )
      } )
  } else if ( error ) {
    console.log( "The photo picker errored. Check ImagePicker.launchCamera func" )
    console.log( error )
  }
} )

[JonoH]

Good catch @Monte9. Thanks for sharing!

[Odywan55]

Hello, have the same issue, only from camera image is rotated , but response from camera and gallery is the same ((( and i tried different to pass different options to picker( isVertical, rotation) - no effect (( thank you for any help !

options to picker:

response from camera :

response from galary :

Android 5.1
"react-native": "0.50.3",
"react-native-image-picker": "^0.26.7",

[ibraabada]

@JonoH @Monte9 guys you made my day that work perfectly.

[Maddoc42]

@Monte9 that works great for photos taken by the camera! Does this also work for you when selecting the same image via the gallery?

Tested with a LG G2 and I am seeing inconsistent behaviour when picking the same (!) image with either gallery or camera. With the above code rotation is correct when picking via camera, but rotated when coming from the gallery. originalRotation is 90 in both cases, URI differs though.

Does anybody else have this issue?

For completeness:

• Result via camera:

{
 "originalRotation": 90,
 "uri": "content://[app-id]/app_images/Android/data/[app-id]/files/Pictures/image-3dc109f0-71f9-4f15-acc1-d9342e8c67a9.jpg"
}

• Result via gallery

{
 "originalRotation": 90,
 "uri": "content://media/external/images/media/25653"
}

[tirtaabimanyu]

I'm having the same issue as @Maddoc42
@Monte9 's solution works for taking a picture via camera but failed when selecting from the gallery. Tested with my Samsung S7 Edge.

[josenaves]

I'm also having this issue. It seems to be related with Android 6.x devices.
Tested on a LGV520 tablet and MotoX2 phone.

[hubertli1991]

Hope this helps. Setting rotation: 360 worked for me.

Image-picker's "original" / default image config causes this bug.

Overriding the default config is not so straight forward because this library ignores some image configurations. https://github.com/react-community/react-native-image-picker/blob/694fa1de5cf4a3dce8e135054c3831fba85e3880/android/src/main/java/com/imagepicker/media/ImageConfig.java#L139

So, if you only set rotation: 0, the image on Android will get rotated 90 degrees because image-picker will continue to use the default image config. If, however, you set rotation: nonZeroInteger, image-picker will respect your configuration -- setting rotation to 360 will preserve the orientation. If you don't set rotation and just set quality: 0.99 (I would not suggest doing this), image-picker will also respect your config -- not rotate and reduce the quality by 0.01.

[carlwelchdesign]

setting rotation to 360 is the simplest solution. Thanks @hubertli1991

[ganlub]

I went with @hubertli1991 proposal for Android (as selfies are giving 270 of originalRotation), and so far it seems to be properly working. Prior to that I was checking on the backend if the width was bigger than the height and if so rotating -90.

Is it there any official workaround/progress for this issue? On the API's reference originalRotation, #199 is mentioned but this issue is far more useful.

[malonguwa]

@hubertli1991 @carlwelchdesign hey~ are you guys talking about setting rotation to 360 to solve the issue by using react-native-image-resizer library or this react-native-image-picker ?

Edited: I got it~ we can pass rotation to the options in react-native-image-picker, and this solved my image rotate issue.
const options = {
rotation: 360
};

[stale[bot]]

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. You may also mark this issue as a "discussion" and I will leave this open.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. Fell free to reopen this issue, if this still affecting you.

[krakzk]

I am still facing this issue, where my images taken from camera are rotated by -90 or 270 , which i cant confirm as my original rotation comes as 0 and isVertical is true.
i have tried the 360 rotation passing, giving quality 0.99 etc. Sadly none of them worked.
The issue doesn't appear in case of images selected from gallery.

Version : 0.28.1
Rn version : 0.59.3

Similar to @Odywan55 mentioned issue.

[KrishyV]

I am still facing this issue, where my images taken from camera are rotated by -90 or 270 , which i cant confirm as my original rotation comes as 0 and isVertical is true.
i have tried the 360 rotation passing, giving quality 0.99 etc. Sadly none of them worked.
The issue doesn't appear in case of images selected from gallery.

Version : 0.28.1
Rn version : 0.59.3

Similar to @Odywan55 mentioned issue.

I have been trying to replicate this issue before removing this fix from my codebase. I've recently upgraded from 0.28 to the latest (2.3.1). Perhaps try upgrading your version? It is over 1.5 years outdated.

Edit: I did manage to replicate it but only for selfies. The originalRotation from the response body is in fact 270 degrees. My proposed fix would be to import react-native-image-resizer and use the createResizedImage method to rotate the image by -90 degrees.

[krakzk]

@KrishyV I cannot updagrade my RN version right away, so i would need to get this done with the current version. I am still getting the original rotation as 0 while taking from camera. Could you suggest any solution for this?

[BSThisarasinghe]

@JonoH your solution works for me. Although one thing to note is that when taking images with the front camera (selfie), the rotation is 270.

Hence here is what I ended up with in case it helps someone:
(react-native-image-picker + react-native-image-resizer)

const IMAGE_PICKER_OPTIONS = {
  title: 'Select a photo',
  mediaType: 'photo',
  noData: true
}

ImagePicker.launchCamera( IMAGE_PICKER_OPTIONS, response => {
  const { error, uri, originalRotation } = response

  if ( uri && !error ) {
    let rotation = 0

    if ( originalRotation === 90 ) {
      rotation = 90
    } else if ( originalRotation === 270 ) {
      rotation = -90
    }

    ImageResizer.createResizedImage( uri, 800, 600, "JPEG", 80, rotation ).
      then( ( { uri } ) => {
        this.setState( { uri } )
      } ).catch( err => {
        console.log( err )

        return Alert.alert( 'Unable to resize the photo', 'Please try again!' )
      } )
  } else if ( error ) {
    console.log( "The photo picker errored. Check ImagePicker.launchCamera func" )
    console.log( error )
  }
} )

Hi I had to add one more condition like this to make it work.
```
let rotation = 0;
if (response.originalRotation === 90) {
rotation = 90;
} else if (response.originalRotation === 180) {
rotation = 180;
} else if (response.originalRotation === 270) {
rotation = -90;
}

```

But, is there a way to identify whether user chose camera or gallery. Because I don't want to apply above conditions if it is from the gallery.