Local images not cropping properly

[splend-shashank]

[hossein-zare]

I'm having the same issue image getting cropped incorrectly along with Error: x + width must be <= bitmap.width()

[barrsan]

Hey there! It is possible that the error is not related to local images.

The error (Error: x + width must be <= bitmap.width()) appears when the parameter size.width + offset.x greater than original image width.

Read about these parameters here https://github.com/react-native-community/react-native-image-editor#cropdata

@hossein-zare, can you create a snack that reproduces your problem? Or can you provide me with an image and a piece of code that reproduces this problem?

[hossein-zare]

Hello,
I'm using your https://github.com/barrsan/react-native-simple-image-cropper/tree/master/example
Both of CROP_AREA_WIDTH & CROP_AREA_HEIGHT are equal to Dimensions.get('window').width

By the way i tried to create an Expo Snack, as usual it didn't work.

You can get this image as an example https://unsplash.com/photos/Wi_zzUPm580
I've downloaded the image on the Android Emulator.

It's like that happens when the height of the image is greater than the width, I'm not %100 sure.

[barrsan]

@hossein-zare, @splend-shashank, it seems that the issue appears when the image is large (in your case 4119 x 6068). This issue is only in Android and related to this issue facebook/react-native#22145. As a result, we get the wrong cropping image.

Unfortunately, i could not reproduce the Error: x width must be <= bitmap.width () error.

I released 4.0.0-beta-0. You can try this version and let me know if the issue is resolved.

yarn add [email protected]

You also need to install this library react-native-image-size, because it is now used instead of Image.getSize (https://github.com/barrsan/react-native-simple-image-cropper/blob/4.x/src/ImageCropper.tsx#L184).

[hossein-zare]

Now it's working fine with normal images, but images taken by the phone camera are cropped incorrectly. the camera image dimensions are a x b but considered as b x a.
It seems to be an orientation problem.
The Error: x width must be <= bitmap.width () error is gone!

There's another minor issue with the PinchGesture and PanGesture, I'll create another issue.
I hope that fixing these bugs makes it better and better.

[piotrponikowski]

I am also facing similar issue for photos taken from camera, only when images are larger than 2000x2000. I will try to test 4.0.0

[barrsan]

It seems that I managed to solve this problem. Try 4.0.0-beta-1

yarn add [email protected]

I used several additional libraries. Please see the installing dependencies.

If all is well, then I will release version 4.

[hossein-zare]

Perfect! it works like a charm.

[piotrponikowski]

It works also for me, thank you!

Regarding new dependencies - why react-native-image-rotate is needed as react-native-image-resizer already supports rotation?

I wanted to stay away from react-native-image-rotate due bad experience with this module. I saw you forked it to solve some issues, however it looks it can be easly replaced? or I am missing something?

[barrsan]

@piotrponikowski, I will try to answer your question.

Let's look at the example of this image IMG_0064.JPG

This image is vertical, but for some reason the dimensions are horizontal. (what @hossein-zare talked about here).

Then you can see an interesting point. We have the same image, but in one case it is local, and in the other it is taken from the server.

We look at what we have in realSize

rotation = 90 - local image
rotation = 0 - from the server

Unfortunately react-native-image-resizer only works with local files, or I did something wrong.

Therefore, I had to use react-native-image-rotate, because in this situation, he copes well with the task.

But it turns out everything is not as wonderful as we would like, react-native-image-rotate has a problem - it does not work correctly in this situation:

You can experiment with the angle parameter ImageRotate.rotateImage yourself and understand that you will not get the desired result.

It turned out that in this situation, already react-native-image-resizer copes with the task.

Therefore, I had to combine both libraries to get the desired result.

It seems that I was mistaken in this block. (https://github.com/barrsan/react-native-simple-image-cropper/blob/4.x/src/ImageCropper.tsx#L141) It is enough to use only react-native- image-rotate here.

[piotrponikowski]

Module react-native-image-rotate is abandoned for last 2 years. There will come more issues soon, like reducing image quality due this line: https://github.com/dgladkov/react-native-image-rotate/blob/master/android/src/main/java/io/codebakery/imagerotate/ImageRotateModule.java#L51
and even more issues I can't remember. Are there any chances to release new version react-native-image-rotate to npm? If not, then it would be the best to stay away from this module.

If react-native-image-resizer doesn't support remote images, then why not prefetch them? It looks this is exactly what react-native-image-rotate does here: https://github.com/dgladkov/react-native-image-rotate/blob/master/android/src/main/java/io/codebakery/imagerotate/ImageRotateModule.java#L195
This check can be reimplemented on JS side. If supporting remote images is in scope of react-native-simple-image-cropper, then I believe prefetching them is correct way to deal with this issue, instead using obsolete modules.

[barrsan]

@piotrponikowski, you convinced me to abandon react-native-image-rotate 😁

I am not strong in Java, but it seems that there is no other choice but to create my own native module that will do prefetch (something like react-native-image-rotate functionality).

Unfortunately at the moment, I can’t refuse to support remote images.

[gomes042]

I also particularly had some errors in the position of the cropped image being wrong on real devices other than emulated environments working fine, maybe it's a PixelRatio problem or something :'(