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

[jdcaacbay-wp]

Still no fix for this?

[salik-a]

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.

this is worked for me bro, thanks a lot

[SeamusY]

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.

this worked for me, but any specific reason why?? Curious if anyone had the chance to dig around.

[SourceCipher]

Increasing dimensions is not the solution at all unless you have someone giving you free unlimited cloud storage, then that's not a problem, but for anyone wanting to use for profile pictures or anything really apart wallpaper sizes, this is unusable as its pointless to store 1mb size pictures with 1000x800 size when your app displays them as 150x150 or smaller

[meznaric]

Applying the changes from this PR manually solves the issue for me.

iOS image is resized to 200x200 by default, not to selected crop rect.

[thangflydino]

same problem

[Dakuan]

• 1 to cropping to aspect ratio rather than outright size. we run a photo app, we need to offer the ability to crop to common aspect ratios (eg 16:9, 4:3, 3:2) but dont want the images to be crushed.

[altsanz]

In our team we need the cropping to aspect ratio rather than outright size. How can we help to move mentioned PR forward?

[lucksp]

I think the confusion is what is height & width does on the API of the cropper...

the height & width are the attempted output size of the cropper, which is different from the Cropper rectangle on the device.

So, if you don't set these, then what ever your rectangle size is, is what will be used. However, the kicker with this API is that we'll never know beforehand WHAT the cropped dimension will be. So we have to guess. We can try to get the original image dimensions, but this has obvious downsides because cropping inherently makes the image smaller.

So, if I use these options:

await ImageCropper.openCropper({
      mediaType: 'photo',
      path: photoPath,
      freeStyleCropEnabled: true,
      width: 1000,
      height: 1000,
      enableRotationGesture: false,
      compressImageQuality: 1,
    });

The Cropper will try to output 1000x1000.
However, since I have freeStyleCropEnabled, if I choose 16:9 ratio, it will not output the 1000x1000. It will max out the width to 1000 regardless of the cropping box. So now, my output is width: 1000; height: 403.

The image quality is at least useable now...

[ajay-mandaviya]

Still facing same issue, if u capture the document image or image which contain text After capture the images text is not visible clearly
I have crop the image ratio in 3:4

U can set this option for android in native files, that improve image quality little bit uCrop.withMaxResultSize(1000, 1000); options.setCompressionQuality(100); options.setMaxBitmapSize(10000);

But for my case this still not working So for crop the image i've used this. https://github.com/hhunaid/react-native-image-crop-tools