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

Cropping photo - Should to save quality when scaled (Android)

Open eashevchenko opened this issue 8 years ago • 24 comments

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

eashevchenko avatar Jun 22 '17 09:06 eashevchenko

could you please better explain the problem here?

ivpusic avatar Jun 22 '17 09:06 ivpusic

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 avatar Jun 22 '17 09:06 eashevchenko

I m going to found problems with uCrop library.

eashevchenko avatar Jun 22 '17 09:06 eashevchenko

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

ivpusic avatar Jun 22 '17 10:06 ivpusic

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.

brunolemos avatar Sep 09 '17 00:09 brunolemos

issue occurs in iOS too.

thebergamo avatar Oct 25 '17 23:10 thebergamo

+1

sabbyt54 avatar Jan 04 '18 03:01 sabbyt54

+1 this is still not fixed

conradjonp avatar Nov 08 '18 05:11 conradjonp

+1

ThomasGHenry avatar Nov 12 '18 18:11 ThomasGHenry

+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.

ollyde avatar Jan 26 '19 12:01 ollyde

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

drwasho avatar Feb 15 '19 03:02 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.

drwasho avatar Feb 27 '19 00:02 drwasho

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

ollyde avatar Feb 27 '19 11:02 ollyde

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.

ivpusic avatar Feb 27 '19 23:02 ivpusic

@ivpusic

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

ollyde avatar Feb 28 '19 14:02 ollyde

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?

ivpusic avatar Mar 01 '19 00:03 ivpusic

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.

ollyde avatar Mar 01 '19 08:03 ollyde

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

torabian avatar Mar 19 '19 22:03 torabian

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

fabiorbap avatar Apr 16 '19 15:04 fabiorbap

any update for this?

dccabao avatar Dec 27 '19 08:12 dccabao

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

ollyde avatar Dec 27 '19 08:12 ollyde

Any update??

msaqlain avatar Aug 31 '20 14:08 msaqlain

Pass a width and a height to the options

filipef101 avatar Nov 02 '21 10:11 filipef101

@ivpusic This is a huge issue. The images are degraded in quality by 5 to 10 times when using the cropper unless you pass a set hight and width. Also, this issue only seems to actually show up in non development builds. Meaning, you can use the library, and see full size images captured after cropping, but for some reason once you create an archive, this issue comes up. Is there a reason that could be happening? I could not find any reason in the code, but it's confirmed happening like that in my case.

Thanks much

Maker-Mark avatar Nov 21 '23 15:11 Maker-Mark