Crop image using a bounding box react-native-camera

Question

i have a camera view in my app in which there is a resizable bounding box

now after taking the image i want to able to only take the part of the image that was focused so i used ImageEditor from this react-native library

the issue i have i am not getting consistent results on the cropping i currently have th following values boxX staring X position of the bounding box; boxY staring Y position of the bounding box; boxWidth width of the bounding box; boxHeight height of the bounding box.

i used the following code at first

ImageEditor.cropImage(image.uri, 
                {
                    offset: {x: boxX, y: boxY},
                    size: {width: boxWidth, height: boxHeight},
                }
            )

this gives a very pixalated and very wrong cropping of the image i dont know why, then i added some calculations to it by adding new variables like the image width and height and also the devices width and height and came up with this code:

ImageEditor.cropImage(data.uri, 
                {
                    offset: {x: ((boxX)/deviceWidth)*data.width, y:((boxY)/deviceHeight)*data.height},
                    size: {width: boxWidth/deviceWidth*imageWidth, height: boxHeight/deviceHeight*imageHeight},

                }
            )

this is much better but the cropping is still wrong on Android but on iOS this seems to work fine and accurate, my question is how can i achieve this please let me know if there is any calculations i should do to get consistent results.

Answer 1

For image cropping I think you should try:

1) https://github.com/ivpusic/react-native-image-crop-picker

It is more used, looks to be maintained better and could simplify your work.

or

2) a picker and https://github.com/prscX/react-native-photo-editor

if you want more complicated editing.

or

3) if you are satisfied with your current library for iOS, use one of the 2 from above only for android.

Note: this is a known issue of the react-native-image-editor, especially for android. The discussions and possible workarounds that could work on some devices can be found here:

https://github.com/callstack/react-native-image-editor/issues/54#issuecomment-754688978