CODEWITHSUNDEEP
react-native
dipgirl
dipgirl

Reputation: 690

How to crop image in image picker before upload image

I am new in react native. I want to crop image before upload image. I am following this tutorial https://reactnativecode.com/upload-image-to-server-using-php-mysql/#comment-5335. Now I have problem to crop image before upload. How can I implement crop function into coding? Can anyone help me? Thank you very much.

Upvotes: 4

Views: 13447

Answers (2)

user5553868
user5553868

Reputation:

Use react-native-image-crop-picker instead of react-native-image-picker

Upvotes: 0

Sai kiran
Sai kiran

Reputation: 366

You can try using https://github.com/ivpusic/react-native-image-crop-picker which can crop the selected image in both IOS and Android. Basic example for this is 

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')
    }
}

yet there is a drawback here you need to create your own popup for selecting images through camera or gallery. Other than that this component is really made of it. The whole documentation you can find in mentioned link

Upvotes: 7

Related Questions