Cropping image on IOS results in poor quality image

[davunt]

Version

Tell us which versions you are using:

• react-native-image-crop-picker v0.32.2
• react-native v0.62.2

Platform

Tell us to which platform this issue is related

• iOS

Expected behaviour

Cropped image quality at high compress image quality(>0.8) should result in very little change in quality of image

Actual behaviour

Cropped images result in very poor quality images on IOS

Steps to reproduce

1. Select image to crop

2. Crop image

3. Check result of cropped image

Cropping of original image

Result of cropping image

[MyRealFood]

Same here!

[bulatkhayrullin]

Same

[vinayakb-pits]

+1

[bvodola]

compressImageQuality did NOT do the trick for me. What works is to add width and height with substantial values to your picker options object. Here's an example with values that I actually use:

const PICKER_OPTIONS = {
  cropping: true,
  freeStyleCropEnabled: true,
  width: 1200, // Add this 
  height: 1500, // Add this
};

let image = await ImagePicker.openCamera(PICKER_OPTIONS);

[abbasmoosavi]

Use https://github.com/abbasmoosavi/react-native-image-crop-picker.git my fork

[chernandezq]

@abbasmoosavi could you say to me how you fixed it for better the quality when I crop the image in ios? why are better your clone and no the official package?

[timothyerwin]

The image quality on this picker is really bad. How can you ruin a photo when that's the entire point of this library?

[ObidosDev]

Same!

[Catnais88]

Same for me

[jordangrant]

@bvodola solution works. I did 3x my viewport dimensions for crisp resolution

ImagePicker.openCropper({
     width: wp('100%') * 3,
     height: wp('100%') * 1.3926 * 3,
})

[psyzz]

@abbasmoosavi thanks for the fork, could you update your fork ? i tested it and i loose the freeStyleCropEnabled functionnality :p

[TeraBlitz]

This is still an ongoing issue.

[emzet93]

So what I noticed here, is that if you pass width and height values, cropped image will be always scaled to those values, even if the selected portion of original is much smaller.

Example: Original image has 1000px/1000px dimensions. You pass width: 900 and height: 900 properties to picker. Then, when cropping, you zoom in and select portion which is originally sized to 100px/100px. Then, as the result, you get 100px/100px portion scaled up to 1000px/1000px which is pretty bad. Also if you don't pass width and height properties, it points to 200 by default.

Can someone confirm that I understand it properly?

Ideally width and height params passed to picker should be only considered the selected portion is bigger and we want it to compress/scale down. Or they should be optional and then we can get cropped part in original size

[loekTheDreamer]

Use https://github.com/abbasmoosavi/react-native-image-crop-picker.git my fork

this would be great if you rebased your work and not merged it (Showing 199 changed files with 13,743 additions and 6,041 deletions). i just wan tot see the changed files so that i can create a patch.

[phuoctai12t]

compressImageQuality did NOT do the trick for me. What works is to add width and height with substantial values to your picker options object. Here's an example with values that I actually use:

const PICKER_OPTIONS = {
  cropping: true,
  freeStyleCropEnabled: true,
  width: 1200, // Add this 
  height: 1500, // Add this
};

let image = await ImagePicker.openCamera(PICKER_OPTIONS);

Add width, height works for me on ios width: Platform.OS === 'ios' ? 1280 : undefined, height: Platform.OS === 'ios' ? 1280 : undefined,