react-native - 如何在上传图像之前在图像选择器中裁剪图像

Question

我是 React Native 的新手。我想在上传图像之前裁剪图像。我正在关注本教程 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')
    }
}

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