React-native-image-crop-picker: iOS bad ImageQuality when cropping camera taken image

[rendomnet]

Version

Tell us which versions you are using:

• react-native-image-crop-picker v0.24.1
• react-native v0.59.8

Platform

Tell us to which platform this issue is related

• iOS

Expected behaviour

Same image quality as camera did

Actual behaviour

When I press accept after I took image with camera. And cropping window appear. Image quality is drastically worse.

Steps to reproduce

let image = await ImagePicker.openCamera({
 ...
 compressImageQuality: 1
});

let result = await ImagePicker.openCropper({
 path: image.path,
 ...
 });

Attachments

// stacktrace or any other useful debug info

Love react-native-image-crop-picker? Please consider supporting our collective:
👉 https://opencollective.com/react-native-image-crop-picker/donate

[saadkhwaja1]

I think openCropper has a default width and height = 300 and 400. It worked when I set
width: data.width ,
height: data.height,

[saikiranoptisol]

@rendomnet what have you done to fix this issue

[imbudhiraja]

@rendomnet what have you done to fix this issue

[rendomnet]

nothing it was my error. compressed image twice, first with image picker second with cropper

[imbudhiraja]

okay @rendomnet

[msqar]

As @saadkhwaja1 says, you need to set height and width. It's used for the cropping option as the final resolution.

[Volekss]

@saadkhwaja1 how can you get the data object with image width and height before selecting an image?
Can you share your code please?

[saadkhwaja1]

@Volekss in this scenario we were getting the image from camera, which returns actual dimensions of the image:

    takePicture = async () => {
        if (this.camera) {
            const options = { quality: 0.2, base64: true, fixOrientation: true };
            await this.camera.takePictureAsync(options).then((data) => {
                // console.log(data.base64);
                ImagePicker.openCropper({
                    cropping: true,
                    path: data.uri, //'data:image/jpeg;base64,'+data.base64,
                    includeBase64: true,
                    width: data.width,
                    height: data.height,
                    // compressImageQuality: 1,
                    freeStyleCropEnabled: true,
                    mediaType: 'photo',
                }).then((data) => {
                    let a = data.data;
                    ModelClass.journalPicDetails = [0, data.width, data.height];
                    ModelClass.journalPic = a;
                    this.props.navigation.navigate("JournalPicPreview");
                }).catch((e) => {
                    // console.log("oh NO!!!!\n"+e); 
                })
            }).catch((err) => {
                // console.log("oh NO!!!!\n"+err); 
            });
        }
    };

[Volekss]

Thanks, mostly my question was about uploading images from gallery, because you can't get their size from camera :)
Are you handling that case?

[saadkhwaja1]

@Volekss in that case - I have't done that- but if you are using the openPicker function of this library for gallery upload, you can get the dimensions through: image.width, image.height, then use that while cropping
Hope this helps

    PickPicture = () => {
        // add media: choose photo
        this.refs.AddMediaModal.close();
        ModelClass.journalParentScreen = this.props.journalParentScreen; 
        ModelClass.isjournalGalleryOpen = true;
        ImagePicker.openPicker({
            includeBase64: true,
            includeExif: true,
            mediaType: "photo",
            // compressImageQuality: 0.2
        })
            .then(image => {
                ModelClass.journalPicDetails = [0, image.width, image.height];
                ModelClass.journalPic = image.data;
                this.props.navigation.push("JournalPicPreview");
            })
            .catch(e => {
                ModelClass.isjournalGalleryOpen = false;
                // alert("oh no!");
            });
    }