时间戳

首页 > 解决方案 > 如何在上传图像之前在图像选择器中裁剪图像

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

问题描述

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

标签： react-native

解决方案

您可以尝试使用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')
    }
}

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

推荐阅读