Are the axis inverted when cropping?

[frodriguez-hu]

Ask your Question

I realized that when I modify the x it has impact on the y axis on the final output an viceversa

[retyui]

@frodriguez-hu Could you provide an example so I can easy reproduce this issue ?

[frodriguez-hu]

This is what i am doing @retyui :

ImageRN.getSize(`file://${takenPhoto.path}`, async (w, h) => {
        const scaleFactorY = h / windowDimensions.height;
        const scaleFactorX = w / windowDimensions.width;
        try {
          const {
            uri,
            size,
            width: widthH,
            height: heightH,
          } = await ImageEditor.cropImage(`file://${takenPhoto.path}`, {
            offset: {
              x: (y + height / 2) * scaleFactorY,
              y: x * scaleFactorX,
            },
            size: {width: height * scaleFactorY, height: width * scaleFactorX},
            displaySize: {width: 192, height: 192},
          });
          console.log(size, w, h, widthH, heightH);
          setPhoto(uri);
        } catch (e) {
          console.log(e);
        }
      });

I have to invert the axis to make it work

[frodriguez-hu]

I just have some coordinates on other NxM Dimensions and I want to crop the image with those dimensions

[frodriguez-hu]

@retyui

And also x which is y on the final result, is not cropping on the right position on the transformation I made.

I mean, with inverted axis, this should work:

     const scaleFactorY = h / windowDimensions.height;
        const scaleFactorX = w / windowDimensions.width;
        try {
          const {
            uri,
            size,
            width: widthH,
            height: heightH,
          } = await ImageEditor.cropImage(`file://${takenPhoto.path}`, {
            offset: {
              x: y * scaleFactorY,
              y: x * scaleFactorX,
            },
            size: {width: height * scaleFactorY, height: width * scaleFactorX},
            displaySize: {width: 192, height: 192},
          });

But x is cutting it in the middle or near of (real y axis on displayed image)

[retyui]

What was used to take a photo ?

[frodriguez-hu]

react-native-vision-camera on the last version which with the front camera automatically mirror the photo. I mean, the photo is being well rendered

[retyui]

well, there was a known issue with RN-vision-camera: https://github.com/mrousavy/react-native-vision-camera/issues/2515 on Android

---

but I need to test it on my end as PR for the issue was merged: https://github.com/mrousavy/react-native-vision-camera/pull/2932

[retyui]

thx for reporting it

[frodriguez-hu]

I am using the last React Native VC version

[frodriguez-hu]

Do you know if there are a workaround to handle it correctly on android?

[frodriguez-hu]

@retyui It worked well using takeSnapshot instead of takePhoto

[retyui]

Do you know if there are a workaround to handle it correctly on android?

@frodriguez-hu An orientation prop from the .takePhoto() result needs to be considered.

For example:

const photo = await cameraRef.current.takePhoto({ flash: 'off' });
const isPortrait = photo.orientation.includes('portrait');
const width = isPortrait ? photo.height : photo.width;
const height = isPortrait ? photo.width : photo.height;
 ImageEditor.cropImage(`file://${photo.path}`, {
        size: {width, height},