Image taken from camera is rotated by 90 degrees

[Nirodha26]

Version

Tell us which versions you are using:

• react-native-image-crop-picker v0.37.2
• react-native v0.62.0

Platform

Tell us to which platform this issue is related

• Android

Expected behaviour

Images must not be auto rotated when selected from camera/gallery.

Actual behaviour

Image taken from camera is rotated by 90 degrees.

Steps to reproduce

ImagePicker.openCamera({mediaType: 'photo',
       includeBase64: true,
	compressImageMaxWidth: 960,
	compressImageMaxHeight: 640,
	compressImageQuality: 1.0
})

[AnggaAurelius]

I have same problem when using emulator but when I used real device it ran normally

[Nirodha26]

@AnggaAurelius what is the RN version and library version you're using? Also the tested Android real device?

[ssc9811]

Did you solve this problem??

[Nirodha26]

Did you solve this problem??

Downgrading react-native-image-crop-picker to v0.36.2 resolved the issue.

[bhuvnesh93]

Any solution for latest version - v0.37.2 ? Its working fine on ios when taken from camera but on Android its rotating 90 degree.

[matinzd]

I have a problem with real android devices, working properly on emulator. Acts weird.

[tomislav-arambasic]

TLDR: We've had orientation problem, but it was the server problem - it was creating new Bitmap image from base64 we were sending in request, but not appending image's EXIF data. In-app, after image was selected from picker, images were shown in right orientation, but after upload - they were always rotated into "left" landscape orientation (default one).

First we had Android images rotated, after upload, in-app image presentation worked well. Switching to using react-native-image-picker and applying quality:0.8 fixed the issue. Setting quality works because it has conditional code that runs when quality is set as non-default. It creates and resizes image the different way, I guess. Changing compressImageQuality:0.8 when using this lib didn't do anything.

Then we've had iOS images rotated, after upload, again, in-app image presentation worked well. This time we were using react-native-image-picker and setting maxWidth and maxHeight did the job, fixed it.

At the end, we again had iOS images rotated, but this time images were selected using @react-native-community/cameraroll library.

Finally, we've figured that images in-app have the EXIF data and so does the base64 returned from picker/camera. But, after base64 is sent to server and after image is uploaded, it lost the EXIF data and the image was rotated. Images were always shown in default landscape - it's the default orientation that applies before applying EXIF data orientation.

Server was creating new Bitmap from base64, but never extracting and appending original EXIF data. We've changed the logic - upload image to s3 using phone's file URI,then sending file's link to server, like it should've been done. It works like a charm now.

At the end: I encourage you to use this library, orientation is not its problem, everything works well on its part :)

[DonRyu]

When I took picture with my galaxy a 32 5g with portrait, the base 64 uri image is 90 degree rotated. downgrade to v0.36.2 is not working also.....

Someone know the solution?

[kyunkakata]

set compressImageQuality: 0.99 fix the rotate issue in v0.36.2. @DongHeonRyu Example:

ImageCropPicker.openCamera({
            mediaType: 'photo',
            ...options,
            multiple: false,
            // add this to fix image rotate issue
            compressImageQuality: 0.99,
          });

[DonRyu]

set compressImageQuality: 0.99 fix the rotate issue in v0.36.2. @DongHeonRyu Example:

ImageCropPicker.openCamera({
            mediaType: 'photo',
            ...options,
            multiple: false,
            // add this to fix image rotate issue
            compressImageQuality: 0.99,
          });

Thanks Kyunkakata

I guess downgrade to 0.36.2 is solution even quality 0.5 is also working. I hope the issue is solved at the latest version 0.37....

[camboYY]

i also have issue on 0.38.0

[psaoulos]

Any update on this issue?

[trunghieupython10102001]

I have the same issue on 0.39.0

[sreedevi111]

I have same issue on 0.49.0 as well

[gkasireddy202]

Any update on this issue? I faced this issue on an Android device in react-native-image-crop-picker": "^0.40.0 and react-native:0.68.7.

[AmrithVengalath]

Hi I'm also facing this issue

    "react-native-image-crop-picker": "^0.40.0",
    "react-native": "0.71.4",

device : Nokia 6.1

Downgrading react-native-image-crop-picker to v0.36.2 and setting compressImageQuality: 0.99 didn't resolved the issue.

Any solutions ?

[gkasireddy202]

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

[adamita]

Same issue on real Galaxy S23 device.

Not working:

• set compressImageQuality: 0.99

Please fix it.

[hipolitotata]

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

Worked for me !!! thanks @gkasireddy202