Cropped image is different from the cropping window

[saurabhsbora]

Sometimes the image is cropped correctly and sometimes not. I noticed it happens largely when the file size is greater than 1MB.

[ggunti]

I did not meet this problem yet. Please provide more informations like platform, version, a reproducible demo.

[saurabhsbora]

@ggunti

Environment

react-native-cli: 2.0.1
react-native: 0.61.4
react-native-amazing-cropper: ^0.1.0
react-native-image-rotate: ^2.1.0
@react-native-community/image-editor: ^2.2.0
VSCode
Windows 10
Android

Description

Cropped Image is different from what is seen in the cropping window

Code Snippet

As you can see it automatically cropped the image from the first part even though I didn't even move the cropping window.
It is happening for some of the images, although I am not getting the exact criteria.

[Atharva13]

Yes I am also facing the same issue @ggunti

[ahmed-ismail-nt]

Hit this bug yesterday on an Android 9 device.
Android/iOS emulator/simulator is fine.

"react-native": "^0.61.5"
"@react-native-community/image-editor": "^2.2.0"
"react-native-image-rotate": "^2.1.0"

But, I've also updated the react-native-image-rotate code so that it can compile.

I have a hunch that it may be related to the image orientation.
For example, the image claim to be vertically (portrait) oriented in the exif data but the actual data is horizontally (landscape) oriented.
This is a possible side-effect of using RNCamera without fixOrientation (on Android).
This is just unverified conjecture at this point.

[saurabhsbora]

@AGIsmail Thanks for the information.
The image which I had shown in the above screenshot was selected using a picker.
I had faced issues using images from both sources i.e camera & picker.
I will try to look in the code, if possible could you also share the changes that you have made in react-native-image-rotate.

[ahmed-ismail-nt]

Hey @enthussb
It's basically just the android build.gradle and iOS ImageRotateModule.m files.

For the former, this should be sufficient.

[saurabhsbora]

@AGIsmail Okay, thanks!

[ggunti]

So, as I understand, the react-native-image-rotate library is buggy. Do you know a better library for rotation which could be used to replace react-native-image-rotate? (excepting expo-image-manipulator, because it is expo dependent)

[ahmed-ismail-nt]

I haven't looked into it too deeply but I do know that react-native-image-crop-picker implements image rotation using the uCrop library.

uCrop is quite robust, but it is for Android only.
Using uCrop would effectively turn this library into a clone/fork of react-native-image-crop-picker with the same limitations (e.g., iOS would not have the image rotation feature).

Perhaps the better idea is for us to fix react-native-image rotate if there's enough support/demand from the community?

EDIT: Did you trace the cause of the cropping image issue to react-native-image-rotate? Or should we continue the image-rotation discussion seperately in issue #24 ?

[AdamSheaHewett]

This happens because images taken by phones always have Landscape dimensions, even if taken in Portrait mode. In other words, the width will always be greater than the height, yet for portrait it should be the opposite.

Usually this isn't a problem because most image viewers respect the image's metadata, which specifies orientation (More info).

Solution:

Swap width and height and erase the metadata.

Example:

import ImageResizer from 'react-native-image-resizer';
...
ImageResizer.createResizedImage(image.uri, image.height, image.width, image.mimeType, 100, 0, undefined, false)
    .then((response) => {
            console.log('Resized image in cache', response.uri);
     })
     .catch((err) => {
            console.log('Error resizing image', err);
     });

To determine if it was taken in Portrait mode, check EXIF in metadata. There are libraries for it.

[lid3rs]

You can try this:

import {Image} from 'react-native';

// data is the image object from camera
await Image.getSize(data.uri, (width, height) => {
        data.width = width;
        data.height = height;
      });

[allisson-lima]

@ggunti solution found?

[ggunti]

For cropping is used @react-native-community/image-editor under the hood.
Check this: callstack/react-native-image-editor#54

[ggunti]

It should be fixed in v0.2.3. Please do not forget to revisit the installation steps (README file) because an another dependency was added: @bam.tech/react-native-image-resizer