React-native-image-crop-picker: Cropping photo - Should to save quality when scaled (Android)

[eashevchenko]

During scale photo on screen - should to save quality photo. Also saved image has not correct size

Version

Tell us which versions you are using:

• react-native-image-crop-picker v 0.13.1
• react-native v 0.41.2

Platform

Tell us to which platform this issue is related

• Android

[ivpusic]

could you please better explain the problem here?

[eashevchenko]

I ve used Log from Android sdk. Results of Compression service - width and height is correct. But logged WritableMap values of outWidth and outHeight are incorrect and smaller (PickerModule class, getImage method).

[eashevchenko]

I m going to found problems with uCrop library.

[ivpusic]

do you have some time to check this our and maybe submit PR? Thanks

[brunolemos]

I may be having the same issue. Users are complaining the quality of the photo is too low, then I checked and the images sizes are 281x281, but I have specified 500x500:

 ImageCropPicker.openCropper({
    cropping: true,
    height: 500,
    path: photo.uri,
    width: 500,
})

They say the uploaded image was HD. Issue seems to be android only.

[thebergamo]

issue occurs in iOS too.

[sabbyt54]

+1

[conradjonp]

+1 this is still not fixed

[ThomasGHenry]

+1

[ollydixon]

+1 don't usually do that.
The photos are extremely blurry on Android, using the Base64 as the source. Also using a URL image from a Facebook image.

Even with a config with compression ignored or turned to lowest setting it's still extremely blurry.

Working fine on iOS with the same code.

[drwasho]

This is still a major issue; our designers are pushing us to consider a new module because of this problem.

[drwasho]

The version of the module I'm using is 0.21.3; while I know this is one version below the current release, the new code added for 0.22.0 doesn't touch the code for Android image quality... as the reports from other developers have expressed.

@ivpusic here's a specific example of the problems the developers in this thread are experiencing:

As an example, this is the image I chose to upload: https://unsplash.com/photos/zavkSZXQLk8

This is the code I used for both iOS and Android:

      ImagePicker.openPicker({
        width: 500,
        height: 500,
        compressImageQuality: 1,
        includeBase64: true,
        cropping: true,
      })

This is how the image was uploaded:

iOS

Android

This is a significant problem for us with this module; if you could find a solution to this problem, so many of us here would deeply appreciate it.

[ollydixon]

@drwasho also tried to update, tested on several real Android devices. Seeing the same issue. The library is unusable on Android. I'm using images from URLs (Facebook photos). Working great in iOS.

[ivpusic]

new version with android cropping quality improvements is released https://github.com/ivpusic/react-native-image-crop-picker/releases/tag/v0.23.0. Still, iOS has better quality. this is due to quality which underlying cropping library produces. Please try it out, and if you are still unsatisfied with quality, I suggest to set width and height options to a bigger number than 500.

[ollydixon]

@ivpusic

Upgraded to 0.23.0
Cropping photos from URL's no longer works. Made no other changes.

[ivpusic]

tried both openPicker with cropping and openCropper and they work normally with version 0.23.0. Can you share code snippet which you are using? Also could you share stacktraces?

[ollydixon]

Sure no problem. I'm loading these images in from Facebook photo urls just like iOS (which is working and crisp)

The opening line
ImagePicker.openCropper(getImageSourceConfig(url))

The image source config

export const getImageSourceConfig = (url?: string) => {
    const config: Options = {
        mediaType: 'photo',
        useFrontCamera: true,
        compressImageQuality: 0.9,
        compressImageMaxWidth: 800,
        compressImageMaxHeight: 800,
        cropping: true,
        cropperCircleOverlay: true,
        includeBase64: true,
    }
    if (url) {
        // @ts-ignore
        config.path = url
    }
    return config
}

That's about all you need. I'm seeing this fail on the latest Android version 9.0. On other versions it's still extremely blurry, actually failing my machine learning photo filters cause of it hehe.

[torabian]

On Android is very effed up. Literaly cannot use the cropper.

[fabiorbap]

I put width as 1000 and height as 500 and it worked fine in Android for me

[dccabao]

any update for this?

[ollydixon]

@dccabao the solution is to use Flutter. React-Native is garbage.

[msaqlain]

Any update??