Nativescript-imagecropper throwing "image null" and response error in show

plugins
android

#1

Hi
imageCropper.show method directly hits catch block and throws following error in the console:
JS: ==== object dump start ====
JS: response: “Error”
JS: image: “null”
JS: ==== object dump end ====

I have searched for the similar issue in the forum but it seems no one has yet posted.
I have written the code from the standard snippet given in the document as:

camera.takePicture({width:500,height:500,keepAspectRatio:true})
.then(function (imageAsset) {

                var source = new imageSource.ImageSource();
               var imageCropper = new ImageCropper.ImageCropper();
                source.fromAsset(imageAsset).then((imageSource1) => {
                    imageCropper.show(imageSource1,{lockSquare: true}).then((args) => {
                      if(args.image !== null){
                       imageView.imageSource = args.image;
                      }
                   })
                    .catch(function(e){
                     console.dir(e);
                    });

})

Thanks in advance.


#2

You are incorrectly accessing fromAsset, it’s a static method.


#3

Thank you but sorry i didn’t get you.
how does it make a difference while accessing when it is static ? should it be written in different way? any hint would be helpful.
Thanks in advance.


#4

Its basics of OOP, I believe Google must give you better explanation.


#5

This is the snippet from the npm plugin usage blog:

They’ve created the instance for imageSource, so did I. fromAsset doesn’t seem a static method here.

var camera = require(“nativescript-camera”);

// You might want to request camera permissions first
// check demo folder for sample implementation

camera.takePicture({width:300,height:300,keepAspectRatio:true})
.then((imageAsset) => {
let source = new imageSource.ImageSource();
source.fromAsset(imageAsset).then((source) => {
// now you have the image source
// pass it to the cropper
});
}).catch((err) => {
console.log("Error -> " + err.message);
});

Still i tried without creating object of imagesource but the error is same:
JS: ==== object dump start ====
JS: response: “Error”
JS: image: “null”
JS: ==== object dump end ====


#6

I don’t see any change in your code. it suppose to be

imageSource.fromAsset(imageAsset);

That’s how at least you access static methods.


#7

Yes, I did the same but the error I am getting is same.
JS: ==== object dump start ====
JS: response: “Error”
JS: image: “null”
JS: ==== object dump end ====

A grey colored image is being saved besides the picture taken in the mobile everytime imagecropper.show() method is hit. I didn’t notice it before. imagesource doesn’t seem null in my case.


#8

This is my method:

const imageSource = require(“tns-core-modules/image-source”);
var ImageCropper = require(“nativescript-imagecropper”).ImageCropper;
const permissions = require(“nativescript-permissions”);

takePicture() {
var that = this;
var filePath = “”;
permissions
.requestPermission([
android.Manifest.permission.CAMERA,
android.Manifest.permission.WRITE_EXTERNAL_STORAGE
])
.then(() => {
camera.takePicture({width:500,height:500,keepAspectRatio:true})
.then(function (imageAsset) {
const folder = fs.knownFolders.documents().path;
const fileName = “selectedImage2” + Date.now() + “.jpeg”;
const path = fs.path.join(folder, fileName);
var imageCropper = new ImageCropper();
imageSource.fromAsset(imageAsset).then((imageSource1) => {
console.log(JSON.stringify(imageSource1.android));
imageCropper.show(imageSource1).then((args) => {
console.log(typeof(args));
if(args.image !== null){
console.log(typeof(args.image));
imageView.imageSource = args.image;
saved = imageView.imageSource.saveToFile(path, “jpg”, 100);
filePath = path;
that.pictureImageSource = path;
that.isLoading = true;
var request = {
url: RESOURCE_API + “/uploadprofilepicture?userId=” + 0 + “&docType=” + “’’”,
method: “POST”,
headers: {
“Content-Type”: “application/octet-stream”,
“File-Name”: “file”
},
description: “{ ‘uploading’: " + “file” + " }”
};
var params = [
{ name: “file”, filename: filePath, mimeType: ‘image/jpeg’ }
];
var task = session.multipartUpload(params, request);
task.on(“progress”, logEvent);
task.on(“error”, logEvent);
task.on(“complete”, onComplete);
}
})
.catch(function(e){
console.log(“error imagecropper”);
console.dir(e);
});
})

                function logEvent(e) {
                    console.log("currentBytes: " + e.currentBytes);
                    console.log("totalBytes: " + e.totalBytes);
                    console.log("eventName: " + e.eventName);
                    if (e.eventName === 'error') {
                        alert("Error:" + e.message)
                        that.isLoading = false;
                        that.pictureImageSource = "";
                    }
                }
                function onComplete(e) {
                    console.log("eventName: " + e.eventName);
                    var headers = e.response.getHeaders();
                    var iterator = headers.entrySet().iterator();
                    while (iterator.hasNext()) {
                        var header = iterator.next();
                        if (header.getKey() === "path") {
                            console.log("eventName: " + e.eventName + " => " + header.getKey() + ": " + header.getValue());
                            that.pictureImageSource = header.getValue();
                            that.isLoading = false;
                        }

                    }
                    that.isLoading = false;
                }
                
            }).catch(function (err) {
                console.log("Error -> " + err.message);
            });
        })
        .catch(function() {
            // When user denies permission
            console.log("User denied permissions");
        });
        //this.isLoading = true;
        //camera.requestPermissions();
        
        that.isLoading = false;
    }

Package.json:
“dependencies”: {
“nativescript-background-http”: “^3.3.0”,
“nativescript-bitmap-factory”: “^1.7.1”,
“nativescript-camera”: “^4.0.2”,
“nativescript-imagecropper”: “^1.0.4”,
“nativescript-imagepicker”: “^6.0.3”,
“nativescript-theme-core”: “~1.0.4”,
“tns-core-modules”: “^4.2.0”
}

error i am getting in the console:
JS: error imagecropper
JS: ==== object dump start ====
JS: response: “Error”
JS: image: “null”
JS: ==== object dump end ====


#9

looks like com.yalantis.ucrop.UCrop is always undefined in imagecropper.android.js.
what can resolve this error, please help.


#10

It just had to do
tns platform remove android

and then

tns run android