使用边界框 react-native-camera 裁剪图像

时间:2021-05-23 12:28:07

标签: react-native crop react-native-camera

我的应用程序中有一个相机视图,其中有一个可调整大小的边界框 camera view bounding box image

现在拍摄图像后,我希望能够仅拍摄聚焦的图像部分,因此我使用了 this react-native library

中的 ImageEditor

我遇到的问题我在裁剪上没有得到一致的结果我目前有以下值 boxX 盯着边界框的 X 位置; boxY 凝视边界框的 Y 位置; boxWidth 边界框的宽度; boxHeight 边界框的高度。

我一开始使用了下面的代码

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

这对图像进行了非常像素化且非常错误的裁剪,我不知道为什么,然后我通过添加新变量(例如图像宽度和高度以及设备宽度和高度)向其添加了一些计算,并提出了此代码:

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

                }
            )

这好多了,但在 Android 上裁剪仍然是错误的,但在 iOS 上这似乎工作正常且准确,我的问题是我如何实现这一点,请告诉我是否应该进行任何计算以获得一致的结果.

1 个答案:

答案 0 :(得分:2)

对于图像裁剪,我认为您应该尝试:

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

它使用得更多,看起来维护得更好,并且可以简化您的工作。

2) 选择器和 https://github.com/prscX/react-native-photo-editor

如果你想要更复杂的编辑。

3)如果您对当前适用于 iOS 的库感到满意,请仅将上述 2 个库用于 android。

注意:这是 react-native-image-editor 的一个已知问题,尤其是对于 android。可以在此处找到适用于某些设备的讨论和可能的解决方法:

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