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]

https://github.com/bthurlow/nativescript-imagecropper/issues/49#issuecomment-570948851