[Android] When selecting image from gallery or taking photo, image loses orientation

[joeferraro]

Version

Tell us which versions you are using:

• react-native-image-crop-picker v0.14.1
• react-native v0.43.1

Platform

• Android

Expected behaviour

• Take photo or select photo from gallery
• Image is saved locally with original orientation

Actual behaviour

• Take photo or select photo from gallery
• Image is saved locally without the original orientation

Steps to reproduce

ImagePicker.openPicker({
  cropping: false,
  includeBase64: true,
  compressImageQuality: 0.5,
});

Important This only occurs when cropping is set to false and compressImageQuality is set to a value less than 1.

[ivpusic]

do you have some time to take a look into this?

[joeferraro]

@ivpusic this issue seems related to Compressor. v2.1.0 of Compressor attempts to resolve the issue but there seems to be a regression for compressed images taken by the camera as I've noted here.

[ferminmoli]

Is there any news about this? Image is loosing it's orientation

[ferminmoli]

I updated to 0.16.0 version (The last one) and Taking photo from camera is crashing on Android. Please, I need help with this.

[WLYau]

Hi, I'm experiencing the same issue, have updated to the latest version and the image still gets rotated? Anymore news on this?

We're using react-native version 0.39.2

[dinatazy]

Happens also with me on IOS. Image is rotated upside down. Any updates on this issue?

[jonathanroze]

Any updates ?

[dinatazy]

@Clowning It turns out it's not the library's issue. my solution was that I get the Exif data by setting property includeExif to true. the exif object includes an orientation number. Each number indicates a specific orientation so , based on the orientation number you can rotate the image to its original position again.

[isaachinman]

@dinatazy I just hit this issue myself. Strange that more people haven't encountered it. When an image has this Orientation EXIF field set, react-native-image-crop-picker will actually swap the image dimensions, but leaves the rotation itself up to the end user. This confusing "half" approach created a bug in my app, and it took me some time to track it down to here.

I would expect react-native-image-crop-picker to leave the width and height values alone, and leave all manipulation to the discretion of the end user.

Thoughts?

[isaachinman]

If anyone else is affected by this, the fix in my case was to simply ignore the dimensions that react-native-image-crop-picker provides and just use RN natively:

Image.getSize(image.path, (width, height) =>

[Jyrno42]

Having a similar issue. If anyone got a fork or an example how they got it working i would love to see it.

[drewandre]

Also seeing this issue, and it seems to be directly related to this issue for react-native-image-picker: react-native-image-picker/react-native-image-picker#655

More info about the exif orientation data that is returned ("0", "1", etc) can be found here: https://developer.android.com/reference/android/support/media/ExifInterface.html#TAG_ORIENTATION

I decided to modify the width and height based on the orientation data:

.then(photo => {
  if (Platform.OS === 'android') {
    let { width, height } = this.handlePhotoOrientation(photo)
    photo.width = height
    photo.height = width
  }
})

handlePhotoOrientation = photo => {
  let photoOrientationData = photo.exif.Orientation
  let width, height
  if (photoOrientationData) {
    switch (parseInt(photoOrientationData)) {
      case 1: // ORIENTATION_NORMAL (values should be swapped)
        return {
          width: height,
          height: width
         }
    case 3: // ORIENTATION_ROTATE_180 (values should be swapped)
      return {
        width: height,
        height: width
       }
     default:
        return {
          width: photo.width,
          height: photo.height
        }
    }
  } else {
    return {
      width: photo.width,
      height: photo.height
    }
  }
}

[bonesyblue]

I've created a PR with a fix for this issue, feel free to check it out and leave feedback 👍

[ivpusic]

should be fixed in https://github.com/ivpusic/react-native-image-crop-picker/releases/tag/v0.24.0

[ahartzog]

Super excited for this fix! What's the usual release timeline to NPM? Trying to decide if I should install from the 0.24.0 release directly or wait for npm.

[ivpusic]

published now

[CrisHemswerthThor]

I have installed version 0.24.0 but facing the same image rotation issue .Please provide me some solution.

My code is given below:

`//function defined for handling the onPress event of Camera
_openCamera() {
ImagePicker.openCamera({

  compressImageMaxHeight:windowH*0.60,

  mediaType: 'photo',

}).then(image => {

  let photoPathFromCamera = image.path.replace('file://', '')

  //image coming from camera opens in RNPhotoEditor

  RNPhotoEditor.Edit({
    path: photoPathFromCamera,
    hiddenControls: ['crop']
  });

});

}`

Version:
react-native-image-crop-picker v0.24.0
react-native v0.59.3

Issue:
In my case ,the image does't rotate in debug mode but in case of release apk the image rotates automatically with the same code and I don't know why this is happening . It's really frustrating .

[twelve17]

@ivpusic - thanks for working on the fix for this issue. I looked over the updated code:

react-native-image-crop-picker/android/src/main/java/com/reactnative/ivpusic/imagepicker/Compression.java

Line 40 in b3606ea

int rotationAngleInDegrees = getRotationInDegreesForOrientationTag(originalOrientation);

I might be misreading it, but is my understanding correct that the code is doing the following:

1. obtaining the rotation data from EXIF
2. applying the rotation to the image when resizing

In other words, if the compression step "applying" the exif orientation to the resized image, should it remove the orientation info from its EXIF data now that it's been applied? Otherwise a future consumer of the image might think it needs to be rotated again?

[dphaener]

To add to @twelve17 comment above, version 0.24.0 is not fixing this for us. We are still seeing this issue with RN v0.57.8.

[karltaylor]

Also getting this issue on version 0.25.0

# react-native info
System:
    OS: macOS 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-3615QM CPU @ 2.30GHz
    Memory: 61.71 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.4.0 - /usr/local/bin/node
    Yarn: 1.17.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5692245
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6
    react-native: 0.60.4 => 0.60.4

[cayasso]

Can this issue be reopen, I am having this same issue in the latest version (0.26.1).

[BogdanRad]

I have some problem on 0.31.1 .... are you a solution for this?

[thiago-sandes]

Some problem on 0.32.2. #IOS

[nitin-gwl]

Same problems with 0.32.2. #Android Version 9 (Samsung Galaxy S8).

[namansukhwani]

I am facing the same issue in open camera images only on android image from open camera is rotated by 90 degrees by itself.
do any one have
a solution ???

[eubnara]

How about trying option compressImageQuality: 0.99?
It removes exif metadata by compressing but rotates correctly.

I experience wrong rotation problem but I finally know that the problem comes from others.

I use react-native-image-resizer. Even though I set keepMeta: true, it loses orientation.
(it is explained in https://github.com/bamlab/react-native-image-resizer#promise-createresizedimagepath-maxwidth-maxheight-compressformat-quality-rotation--0-outputpath)

Anyway, maybe your image may go through some kind of compression or else and loses exif metadata and it makes your image seen in a wrong way.
So I just use compressImageQuality: 0.99 and make exif metadata removed in advance.

[ngocht143]

@eubnara Yours worked for me 👍 don't know the reason

[15110011]

Taking a photo and then it is still rotated on the newest version
0.35.2

[nmhoan76]

Still for version 0.36.. @ivpusic Please check it

[mojtabaasadi]

Applied @eubnara solution, problem still persists on 0.37.2

[developer-appdam]

I tried @eubnara solution but my images are still rotated. I have no clue why but they just keep rotating. Any tip?

[subhadeepquantiantech]

any update?

[gkasireddy202]

Same problem on v0.40.0.
#1960

[gkasireddy202]

@karltaylor - This below code works in v0.40.0?

Also seeing this issue, and it seems to be directly related to this issue for react-native-image-picker: react-native-image-picker/react-native-image-picker#655

More info about the exif orientation data that is returned ("0", "1", etc) can be found here: https://developer.android.com/reference/android/support/media/ExifInterface.html#TAG_ORIENTATION

I decided to modify the width and height based on the orientation data:

.then(photo => {
  if (Platform.OS === 'android') {
    let { width, height } = this.handlePhotoOrientation(photo)
    photo.width = height
    photo.height = width
  }
})

handlePhotoOrientation = photo => {
  let photoOrientationData = photo.exif.Orientation
  let width, height
  if (photoOrientationData) {
    switch (parseInt(photoOrientationData)) {
      case 1: // ORIENTATION_NORMAL (values should be swapped)
        return {
          width: height,
          height: width
         }
    case 3: // ORIENTATION_ROTATE_180 (values should be swapped)
      return {
        width: height,
        height: width
       }
     default:
        return {
          width: photo.width,
          height: photo.height
        }
    }
  } else {
    return {
      width: photo.width,
      height: photo.height
    }
  }
}

[gkasireddy202]

@dphaener - Not getting photo.exif.Orientation when I captured images from the camera.

Getting below JSON object:

{"height": 3000, "mime": "image/jpeg", "modificationDate": "1694499770000", "path": "file:///storage/emulated/0/Android/data/com.myapp/files/Pictures/image-a92fa6d9-5308-4316-a9c5-026ee0c83f8c8876211762320268300.jpg", "size": 5275914, "width": 4000}

[gkasireddy202]

I rotated the image rotation 0 using npm:react-native-image-resizer before uploading it to the server.
works fine.