Bad image-quality since update to 4.xx

[tobiasklemp]

Make sure to check the demo app(s) for sample usage

done

Make sure to check the existing issues in this repository

checked

Which platform(s) does your issue occur on?

• iOS, android not tested yet.
• iOS 11.1
• emulator and device (IPhone 6)

Please, provide the following version numbers that your issue occurs with:

• CLI: 3.3.0
• Cross-platform modules: 3.3.0
• Runtime(s): IOS: 3.3.0, Android 3.3.1
• Plugin(s): "dependencies": {
  "@angular/animations": "^4.4.1",
  "@angular/common": "^4.4.1",
  "@angular/compiler": "^4.4.1",
  "@angular/core": "^4.4.1",
  "@angular/forms": "^4.4.1",
  "@angular/http": "^4.4.1",
  "@angular/platform-browser": "^4.4.1",
  "@angular/router": "^4.4.1",
  "base-64": "^0.1.0",
  "nativescript-angular": "^4.4.1",
  "nativescript-audio": "^4.0.3",
  "nativescript-camera": "^3.1.3",
  "nativescript-carousel": "^3.1.1",
  "nativescript-floatingactionbutton": "^4.1.2",
  "nativescript-fresco": "^3.0.6",
  "nativescript-geolocation": "^4.2.0",
  "nativescript-imagecropper": "^0.1.2",
  "nativescript-imagepicker": "^4.0.1",
  "nativescript-ios-uuid": "^1.0.0",
  "nativescript-keyboardshowing": "^1.0.0",
  "nativescript-loading-indicator": "^2.4.0",
  "nativescript-local-notifications": "^2.0.0",
  "nativescript-network": "file:../../Plugins/nativescript-network/src",
  "nativescript-photoviewer": "^1.2.0",
  "nativescript-platform": "^1.2.2",
  "nativescript-pro-ui": "^3.2.0",
  "nativescript-social-login": "^1.8.2",
  "nativescript-socket.io": "^0.7.0",
  "nativescript-theme-core": "~1.0.2",
  "reflect-metadata": "~0.1.8",
  "rxjs": "~5.4.2",
  "tns-core-modules": "^3.3.0",
  "zone.js": "~0.8.2"
  },
  "devDependencies": {
  "@angular/compiler-cli": "^4.4.1",
  "@ngtools/webpack": "~1.6.0",
  "babel-traverse": "6.26.0",
  "babel-types": "6.26.0",
  "babylon": "6.18.0",
  "copy-webpack-plugin": "~4.0.1",
  "extract-text-webpack-plugin": "~3.0.0",
  "lazy": "1.0.11",
  "nativescript-css-loader": "~0.26.0",
  "nativescript-dev-typescript": "~0.5.0",
  "nativescript-dev-webpack": "^0.8.0",
  "nativescript-worker-loader": "~0.8.1",
  "raw-loader": "~0.5.1",
  "resolve-url-loader": "~2.1.0",
  "typescript": "~2.4.2",
  "webpack": "~3.2.0",
  "webpack-bundle-analyzer": "^2.8.2",
  "webpack-sources": "~1.0.1"
  },

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.
When i use the imagepicker to select an image the quality of the image I get is very bad. A 25mb file is shrinked to about 25kb. I have not changed anything and i'm pretty sure that this behaviour is occuring since i updated the plugin.

Is there any code involved?

This is the related code. As you can see, i'm also using the imagecropper plugin as an option but the problem exists in either of the two ways.

`selectImages(msg) {
var context = picker.create({
mode: "single",
android: {
read_external_storage: this.getLine(234)
}
});
return new Promise((resolve, reject)=>{
return context
.authorize()
.then(()=>{

				return context.present();
			})		
			.then(
				selection=> {
				
					selection.forEach(function(selected) {
						if(selected instanceof ImageAsset){
							let image = new ImageSource()
							selected.getImageAsync((img, err)=>{
								image.fromData(img).then(
									res=>{
										console.log(res)
										if(msg.userCut === "true"){
											
											let cropper = new icModule.ImageCropper();
											resolve(cropper.show(image, {lockSquare: true}));
										}
										else{
											resolve({image:image}); 
										}
									})
							})
							
							
						}
					});

			}, err=>{
				console.log(err)
				return err;
			}
		)
				
			.catch(function (e) {
				console.log(e)
				return e
			});
	})
}`

[tsonevn]

Hi @tobiasklemp,
I tested your scenario while using nativescript-imageppicker plugin with latest NativeScript version 3.3, however, was unable to recreate the issue with image bad quality. I am attaching a sample project, please review it and make the needed changes, which will allow us to investigate the issue. In the attached project the dimensions of the image are printed in the console and they are equal to those in the original image in the Gallery.
Archive.zip

Something that could be related to the issue is the getImageAsync and the fact that firstly a thumbnail image could be returned, before the original one. I would suggest to use getImage method and to verify, whether you will have the same problem.

[tsonevn]

closing due to inactivity

[tobiasklemp]

@tsonevn Sorry for the Delay in reply. I reviewed your sample and it works in Emulator as well as on my device. But when I try your approach in my project it only works on Emulator. On my device it Shows the Uri in the console but the fileuri and getImage method fails with the error can‘t create Image. This Happens on iOS and android but only on real devices. Any Idea on this?

[tsonevn]

Hi @tobiasklemp,
Excuse me for the delay in reply,
Could you please provide a sample project, where the issue could be recreated? This will help us in finding what is causing this problem on your side.

[tobiasklemp]

Since I'm not able to reproduce this behaviour in a fresh project I'm attaching a stripped version of my real project. I tested it today and found out that the getImage method works on simulator without any problems. On my iPhone it logs the can't create image error to console. However when I provide a options object to the getImage with a width and height <200 it works. Anything greater than 200 leads to the error. Thanks for helping me!
picturebugrepo.zip

EDIT: I tried some things out and it turns out that I have to turn off the optimize iphone storage option and I can't select images from icloud for some reason. This is the same behaviour described in #90 but I thought this should already been fixed, as i am using version 4.0.1. However I verified that the allow network access is turned on and it still doesn't work.

[tsonevn]

Hi @tobiasklemp,
Thank you for the sample project. I notice that you are using an old module. I would suggest upgrading all dependencies to its latest version while following the below-attached sample:

{
	"description": "NativeScript Application",
	"license": "SEE LICENSE IN <your-license-filename>",
	"readme": "NativeScript Application",
	"repository": "<fill-your-repository-here>",
	"nativescript": {
		"id": "org.nativescript.testImagePicker"
	},
	"dependencies": {
		"@angular/animations": "~5.2.0",
		"@angular/common": "~5.2.0",
		"@angular/compiler": "~5.2.0",
		"@angular/core": "~5.2.0",
		"@angular/forms": "~5.2.0",
		"@angular/http": "~5.2.0",
		"@angular/platform-browser": "~5.2.0",
		"@angular/platform-browser-dynamic": "~5.2.0",
		"@angular/router": "~5.2.0",
		"nativescript-angular": "~5.2.0",
		"nativescript-imagepicker": "^4.0.1",
		"nativescript-theme-core": "~1.0.4",
		"reflect-metadata": "~0.1.8",
		"rxjs": "~5.5.2",
		"tns-core-modules": "~3.4.0",
		"zone.js": "~0.8.2"
	},
	"devDependencies": {
		"nativescript-dev-typescript": "~0.6.0",
		"typescript": "~2.6.2"
	}
}

In the version 3.4 was made some improvements related to the Image that might also fixing some cases in your project.
Regarding the iCloud. Does the project crashes or it just does not load the image?