如何在上传图像前在图像拾取器中裁剪图像

Question

我是react原生的新手。我想在上传图片之前裁剪图片。我正在学习这个教程https://reactnativecode.com/upload-image-to-server-using-php-mysql/#comment-5335。现在我在上传之前裁剪图片有问题。如何在编码中实现裁剪功能？有谁可以帮我？非常感谢。

Answer 1

你可以尝试使用https://github.com/ivpusic/react-native-image-crop-picker，它可以在IOS和Android中裁剪选定的图片。基本的例子是

selectPhoto() {
    if (this.state.selectedOption === 'camera') {
        ImagePicker.openCamera({
            cropping: true,
            width: 500,
            height: 500,
            cropperCircleOverlay: true,
            compressImageMaxWidth: 640,
            compressImageMaxHeight: 480,
            freeStyleCropEnabled: true,
            includeBase64: true
        }).then(image => {
            this.setState({imageModalVisible: false})
            this.storeUploadedData(item, image);
        })
            .catch(e => {
                console.log(e), this.setState({imageModalVisible: false})
            });

        console.log('camera')
    } else {
        ImagePicker.openPicker({
            cropping: true,
            width: 300,
            height: 400,
            cropperCircleOverlay: true,
            freeStyleCropEnabled: true,
            avoidEmptySpaceAroundImage: true,
            includeBase64: true
        }).then(image => {
            this.setState({imageModalVisible: false})
        })
            .catch(e => console.log(e));
        console.log('gallery')
    }
}

然而，这里有一个缺点，您需要创建自己的弹出窗口，以通过相机或画廊选择图像。除此之外，这个组件实际上是由它组成的。您可以在上面提到的链接中找到完整的文档

Answer 2

使用react-native-image-crop-picker代替react-native-image-picker