Android: Image size not correct when validating without cropping

[maxximee]

Version

Tell us which versions you are using:

• react-native-image-crop-picker v.0.40.0
• react-native v.0.72.0
• react-native-vision-camera v.2.15.4 (might not be relevant)

Platform

• Android

Expected behaviour

Image height and width is correct

Actual behaviour

Image looks zoomed in and incorrect ratio

Steps to reproduce

1. Call ImagePicker.openCropper with a predefined image uri (in my case the result of vision-camera image)

2. Once the cropper opens, just confirm without doing any changes:

   

3. Display the image in a <Image style={[styles.image, {height: imageHeight}]} source={source} /> where styles.image is: image: { marginTop: 30, padding: 29, width: 250, borderRadius: 10, } and imageHeight is: const imageAspectRatio = props.picWidth / props.picHeight; const imageHeight = 250 / imageAspectRatio;

Attachments

Here is my detailed code:

const photo = await cameraRef.current?.takePhoto({});
      const destinationPath = RNFS.TemporaryDirectoryPath + '/photo.png';
      await RNFS.moveFile(photo?.path ?? '', destinationPath);
      const newPhotoUri = 'file://' + destinationPath;

      Image.getSize(
        newPhotoUri,
        (picWidth, picHeight) => {
          ImagePicker.openCropper({
            mediaType: 'photo',
            path: newPhotoUri,
            width: picWidth,
            height: picHeight,
            cropping: true,
            freeStyleCropEnabled: true,
            enableRotationGesture: true,
          })
            .then(image => {
              console.log(image);
              navigation.navigate('MediaPage', {
                path: image.path,
                picHeight: image.cropRect?.height ?? image.height,
                picWidth: image.cropRect?.width ?? image.width,
              });
              deleteTempPic(newPhotoUri);
            })
            .catch(() => {
              navigation.navigate('MediaPage', {
                path: newPhotoUri,
                picHeight: picHeight,
                picWidth: picWidth,
              });
            });
        },
        error => {
          console.error(`Couldn't get the image size: ${error.message}`);
        },
      );
    } catch (error) {
      console.log('Error taking photo:', error);
    }
  };

Log when not cropping (not correct)

{"cropRect": {"height": 3840, "width": 2158, "x": 1, "y": 0}, "height": 3840, "mime": "image/jpeg", "modificationDate": "1689143086000", "path": "file:///storage/emulated/0/Android/data/com.klim.klimfilmscanner/files/Pictures/579d8de5-57ee-4a18-a708-bbcef3beb716.jpg", "size": 3021607, "width": 2160}

Log when doing a minor crop (correct)

{"cropRect": {"height": 3797, "width": 2056, "x": 1, "y": 0}, "height": 3840, "mime": "image/jpeg", "modificationDate": "1689143115000", "path": "file:///storage/emulated/0/Android/data/com.klim.klimfilmscanner/files/Pictures/71d8e53a-3191-4f36-8319-90bd7a029ab5.jpg", "size": 3144375, "width": 2160}

[maxximee]

I have a workaround to handle this bug: Basically, if the original image size is the same as the cropped size, we just return the original image and not the one from the plugin:

if (
                image.cropRect?.height === image.height &&
                image.cropRect?.width === image.width
              ) {
                navigation.navigate('MediaPage', {
                  path: newPhotoUri,
                  picHeight: picHeight,
                  picWidth: picWidth,
                });
              } else {
                navigation.navigate('MediaPage', {
                  path: getPath(image.path),
                  picHeight: image.cropRect?.height ?? image.height,
                  picWidth: image.cropRect?.width ?? image.width,
                });
              }

[maxximee]

Closing this. The issue lies with vision-camera taking landscape picture instead of portrait.

[amosaxe]

@maxximee were you able to solve the issue in vision-camera?

[maxximee]

@amosaxe actually I was never able to fix it, but after a refactoring to vision-camera version 4 I don't have the issue anymore.

[amosaxe]

Oh, I am still facing the same issue and I am already using the v4(4.3.2). Not sure what to do. @maxximee