react-native-image-crop-picker icon indicating copy to clipboard operation
react-native-image-crop-picker copied to clipboard

Cropping image on IOS results in poor quality image

Open davunt opened this issue 5 years ago • 16 comments

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 Simulator Screen Shot - iPhone 11 - 2020-07-27 at 20 26 30

Result of cropping image Simulator Screen Shot - iPhone 11 - 2020-07-27 at 20 26 38

davunt avatar Jul 27 '20 19:07 davunt

Same here!

MyRealFood avatar Nov 07 '20 17:11 MyRealFood

Same

bulatkhayrullin avatar Nov 12 '20 07:11 bulatkhayrullin

+1

vinayakb-pits avatar Nov 20 '20 11:11 vinayakb-pits

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);

bvodola avatar Nov 23 '20 19:11 bvodola

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

abbasmoosavi avatar Feb 18 '21 08:02 abbasmoosavi

@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?

chernandezq avatar May 14 '21 16:05 chernandezq

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

timothyerwin avatar Sep 18 '21 19:09 timothyerwin

Same!

ObidosDev avatar Oct 25 '21 14:10 ObidosDev

Same for me

Catnais88 avatar Oct 29 '21 09:10 Catnais88

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

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

jordangrant avatar Nov 03 '21 03:11 jordangrant

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

psyzz avatar Aug 20 '22 16:08 psyzz

This is still an ongoing issue.

TeraBlitz avatar Jun 26 '23 18:06 TeraBlitz

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

emzet93 avatar Aug 16 '23 13:08 emzet93

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.

loekTheDreamer avatar Jul 03 '24 14:07 loekTheDreamer