React-native-image-crop-picker: Poor Image Quality after crop

[imbudhiraja]

Version

• react-native-image-crop-picker v0.23.1
• react-native v0.59.4

Platform

• iOS
• Android

Steps to reproduce

1. Open Gallery
2. Select Image
3. Crop Image

You will get a poor image quality after cropping.

Reproduce-able code

const config = {
  cropperStatusBarColor: 'black',
  cropperToolbarColor: 'black',
  cropping: true,
  mediaType: 'photo',
  showCropFrame: true,
  showCropGuidelines: true,
};

ImagePicker.openCamera(config)
  .then((response) => {})
  .catch((err) => {});

ImagePicker.openPicker(config)
  .then((response) => {})
  .catch((err) => {});

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

[SourceCipher]

@imbudhiraja What are your dimensions of the crop?

For me I want to set to 150x150 images and it seems to be an awful quality. If I set to convert some 50x50 for the profile pics, then the quality is impossible to have. I found anything more than 500x500 turns out a good one but the size to store isnt

[imbudhiraja]

@SourceCipher I'm using 320*120 for cover pictures

[SourceCipher]

I have tested both with base64 and original storage image and they all come up in a very bad quality. I uploaded them to the db and they are just unusable and the dimensions of my pic was 300 x 300.

I have checked issues on this library and a lot of them are with bad quality images dating back to 2017. Yet nobody managed to fix it as its the main part of the library. No point having it if the image quality turns out unusable.

[caetius]

Any updates on this? I have been experiencing the same issues for a bit and I bet that a repo with almost 4k stars has at least some people who know the solution to this. Any help is greatly appreciated.

[msqar]

After reading some guy on a different bug ticket, and reading the docs... it says you need to set height and width. It's used for the cropping option as the final resolution. Depending on how high you set it there, the better the quality after cropping.

[cporawat]

Anyone found solution on this? I set more width/height and problem still remain.

[imbudhiraja]

@cporawat No luck buddy.

[jordangrant]

I saw poor image quality using 400x500, when I upped it to 1200x1500 the quality greatly improved. I'd say the solution is to set a greater height/width.

[leviduan]

I saw poor image quality using 400x500, when I upped it to 1200x1500 the quality greatly improved. I'd say the solution is to set a greater height/width.

If you do that, you crop the picture, maybe it's not return the correct size

[axmedbek]

any solution ?

[hackrx]

I am also facing same problem but if we set cropping to false, then image quality is not decreased.
Please help if somebody found any solution

[hackrx]

This issue is solved, here is the code
ImagePicker.openPicker({ width: 1000, height: 800, cropping: true, includeBase64: false, compressImageQuality: 1, // compressImageMaxHeight: 1, // compressImageMaxWidth: 1, compressImageMaxWidth: 1500, compressImageMaxHeight: 1000, })
We need to use height and width as max as possible, before this I was setting
ImagePicker.openPicker({ width: 300, height: 300, cropping: true, includeBase64: false, compressImageQuality: 1, // compressImageMaxHeight: 1, // compressImageMaxWidth: 1, compressImageMaxWidth: 1500, compressImageMaxHeight: 1000, })
And as a result, I was getting poor quality cropped image.

[MariusCatanoiu]

width: 1000, height: 800

Is fine that you found a workaround. But this is not solved. The image will have a bigger space on the server.

[hackrx]

width: 1000, height: 800

Is fine that you found a workaround. But this is not solved. The image will have a bigger space on the server.

No, I have checked my firebase storage and I found that 4.2Mb image file is get converted to 478kb and this is what I want