Freezing App

[Sartori-RIA]

hi, i trying to use this plugin but when image editor is closed the app is freezing for some seconds

my config:

• NativeScript 6
• Angular 8
• Android 9

my source:

const context = imagepicker.create({mode: 'single'});
        context.authorize()
            .then(() => {
                context.present()
                    .then((selection) => {
                        selection.forEach((selected) => {
                             selected.getImageAsync((source) => {
                                    const selectedImgSource = fromNativeSource(source);
                                    new ImageCropper().show(selectedImgSource, {height: 500, width: 500})
                                        .then((args) => {
                                            console.log('success')
                                        })
                                        .catch((e) => {
                                           console.error(e);
                                        })
                                  })
                           });
                    })
           });

[shiv19]

@Sartori-RIA move the call to cropper inside a setTimeout and that should prevent your app from freezing

[ParthMaisheri]

setTimeout doesn't work for me i tried it , it freeze's for 2 seconds @shiv19 @Sartori-RIA @bthurlow

[shiv19]

@ParthMaisheri can you share your implementation here so that I can take a look at how you are calling the cropper?

[ParthMaisheri]

SOURCE:

private startSelection(context) {
	var ms = (new Date).getMilliseconds;
	let that = this;
	this.uploadedImage = null;
	context
		.authorize()
		.then(() => {
			//  that.postImage = null;
			return context.present();
		})
		.then((selection) => {
			that.postImage = that.isSingleMode && selection.length > 0 ? selection[0] : null;
			selection.forEach((selected) => {
				const ios = selected.ios;
				setTimeout(() => {
					selected.getImageAsync(source => {
						const selectedImgSource = imageSource.fromNativeSource(source);
						imageCropper
							.show(selectedImgSource, {
								width: 350,
								height: 300
							})
							.then(args => {
								if (args.image !== null) {
									var localPath = null;
									localPath = this.savepic(args.image);
									console.log("IMAGE" + JSON.stringify(args.image.android));
									this.uploadedImage = localPath;
									this.postImage = localPath;
									this.picUploaded = "showIcon";
									this.imgHolder = "feedImg";
								} else {
									console.log("FAILED");
									this.removePicture();
								}
							})
							.catch(function (e) {
								console.log("inside catch" + e);
							});
					});
				}, 20);
			});
		});
}

@shiv19

[shiv19]

@ParthMaisheri please move call to the cropper inside setTimeout.
And you'll need a timeout of atleast 250ms

You can remove the outer timeout of 20ms that you have.
That timeout is not required.

[ParthMaisheri]

tried the way too, doesn't work

private startSelection(context) {
	var ms = (new Date).getMilliseconds;
	let that = this;
	this.uploadedImage = null;


	context
		.authorize()
		.then(() => {
			//  that.postImage = null;
			return context.present();
		})
		.then((selection) => {


			that.postImage = that.isSingleMode && selection.length > 0 ? selection[0] : null;
			selection.forEach((selected) => {
				const ios = selected.ios;

				selected.getImageAsync(source => {
					const selectedImgSource = imageSource.fromNativeSource(source);
					setTimeout(() => {
						imageCropper
							.show(selectedImgSource, {
								width: 350,
								height: 300
							})
							.then(args => {
								if (args.image !== null) {


									var localPath = null;
									localPath = this.savepic(args.image);

									console.log("IMAGE" + JSON.stringify(args.image.android));
									this.uploadedImage = localPath;
									this.postImage = localPath;
									this.picUploaded = "showIcon";
									this.imgHolder = "feedImg";

								} else {
									console.log("FAILED");
									this.removePicture();


								}
							})
							.catch(function (e) {
								console.log("inside catch" + e);
							});
					}, 250);
				});


			});

		});

}

@shiv19

[shiv19]

@ParthMaisheri which version of image cropper are you on?

[ParthMaisheri]

"nativescript-imagecropper": "1.0.7"
@shiv19

[shiv19]

@ParthMaisheri can you try the latest version instead?

[ParthMaisheri]

even after updating it freeze's @shiv19 .
updated it to 2.0.0

[shiv19]

Ok, please provide a demo app demonstrating the issue, I'll take a look at it tomorrow :)

[ParthMaisheri]

can you help me adding "loading message box", as i cant share the demo app. @shiv19

[shiv19]

You can use nativescript-loading-indicator plugin to show loading indicator

[ParthMaisheri]

hey @shiv19 i am now facing image pixelation issue.
looking at the code do think the height width given to image cropper is causing image to pixelate.

[shiv19]

@ParthMaisheri sorry I can't help you unless you send me a demo code base demonstrating the issue you are facing.
Simply complaining about the problem doesn't help in resolving your issue.
Don't get me wrong, I want to help you, but unless I have enough info about the issue, I can't do much about it.
I've been using this plugin in many projects without any issues.

[shiv19]

#49 (comment)