Cordova Crop Plugin

Question

I'm currently trying to use this cordova plugin in an android app to crop images after uploading them. The README says to use it like this:

plugins.crop(function success () {

}, function fail () {

}, '/path/to/image', options)

Unfortunately I don't have much experience in JavaScript, so I tired it this way:

handleCropPress: function () {
   var oImage = this.byId("image");
   var srcImage = oImage.getSrc();

   plugins.crop(function success () {

   }, function fail () {

   }, srcImage)
}

Any ideas why it's not working? Many thanks in advance :)

Answer 1

where is your getPicture code? they both should work hand in hand... try something like this..

// I assume that you have called the following after installing both cordova-plugin-camera and cordova-plugin crop , so now write an onClick event on a button to call the following line in a function

navigator.camera.getPicture(onPhotoDataSuccess, onFail, { 
    correctOrientation: true, 
    targetWidth: 1024, 
    targetHeight: 1024, 
    destinationType: destinationType.FILE_URI 
}); 

// Now in the onPhotoDataSuccess get the image url.. the one that the api is returning from destinationType.FILE_URI

function onPhotoDataSuccess(imageData) {

    plugins.crop.promise(imageData)
        .then(function success(imageFinal) {
            // Success.
            alert(imageFinal); //alert to see if you are getting the path

            var picPreviewBox = document.getElementById('picPreviewBox'); //create an img tag with src="" and assign an ID named picPreviewBox or anything you feel like and call that id in the above line

            picPreviewBox.style.display = 'block';
            // //picPreviewBox.src = "data:image/jpeg;base64," + image;
            picPreviewBox.src = imageFinal;
            //$("#picPreviewBox").html('<img src="data:image/jpeg;base64,'+image+'" width="100%"/>');

        })
        .catch(function fail(err) {
            // fail
            $.alert("Seems your phone resources are too low to proceed further");
        });

}