Crop base64 image

[RupenAnjaria]

I tried cropping image captured using cordova-camera plugin (https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera). I used Base64 encoding, However, I was not able to crop it using this plugin. My code is like below:

$scope.cropImage = function () { var image = document.getElementById('imgSignature'); plugins.crop.promise(image.src, { quality: 100 }) .then(function success(newPath) { image.src = "data:image/jpeg;base64," + newPath; }) .catch(function fail(err) { var e = err; }) }

` $scope.captureSign = function () { navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL }); }

function onSuccess(imageData) {
    var image = document.getElementById('imgSignature');
    image.src = "data:image/jpeg;base64," + imageData;
}

function onFail(message) {
    console.log('Failed because: ' + message);
}`

Any idea why? It does not generated any error.

[dhaCara]

Hi RupenAnjaria, Have you fixed the issue? I met the same issue recently, I found that this plugin not support the base64 url, so the options should not set destinationType: Camera.DestinationType.DATA_URL, then if you should call the server with base64 url, you can use canvas to convert it.

[matte5031]

Hello @dhaCara I'm trying to crop a canvas from the URI given by canvas.toDataURL() without any success, maybe this isn't possible? When you say " you can use canvas to convert it." How would that be done? Could i convert the canvas to a file so that it could be cropped, in that case how? Any help or input is highly appreciated, thanks!

[dhaCara]

Hi matte5031, you should set the picture type as FILE.URI when cropping, then if you need convert the pictre type to base64, you can use canvas. More details are as following: ` navigator.camera.getPicture( function (imgData) { if (window.plugins.crop) { window.plugins.crop.promise(imgData).then((croppedImage) => { toDataUrl(croppedImage, function(base64Img) { deferred.resolve(base64Img); }); },function(error){ console.log(error); }); } else { toDataUrl(imgData, function(base64Img) { deferred.resolve(base64Img); }); } }, function (message) { deferred.reject(message); }, albumOptions);

return deferred.promise;

};

function toDataUrl(src, callback) { var img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = function() { var canvas = document.createElement('CANVAS'); var ctx = canvas.getContext('2d'); var dataURL; canvas.height = this.height; canvas.width = this.width; ctx.drawImage(this, 0, 0); dataURL = canvas.toDataURL('image/jpeg'); callback(dataURL); }; img.src = src; } `

[matte5031]

@dhaCara Thank you for your answer, sorry if I was unclear. I was wondering if could convert from canvas to a temporary file URI that then can be used to crop(not from file URI to canvas), since the image is originally a canvas and doesn't need to be converted back to canvas, thanks!

[RupenAnjaria]

So far I remember, I didn't used this plugin (may be due to this issue or some other). Instead, I am using the native functionality: see below code: The allowEdit will facilitate cropping natively. The advantage is that irrespective of platform you can provide cropping - if the OS version on phone supports it natively.

navigator.camera.getPicture(onSuccess, onFail, {
            quality: 50,
            encodingType: Camera.EncodingType.PNG,
            mediaType: Camera.MediaType.PICTURE,
            allowEdit: true,
            targetWidth:180,
            targetHeight:60,
            destinationType: Camera.DestinationType.FILE_URI
        });

[paulincai]

@dhaCara dataURL = canvas.toDataURL('image/jpeg') will return SecurityError (DOM Exception 18): The operation is insecure in IOS > 10.

[paulincai]

This is a really nice solution with canvas that avoids the browser security error https://www.sitepoint.com/an-in-depth-look-at-cors/

[ipsjolly]

Try using file plugin's readAsDataURL method as i used in Ionic 4 crop demo application here

  showCroppedImage(ImagePath){
    this.isLoading = true;
    var copyPath = ImagePath;
    var splitPath = copyPath.split('/');
    var imageName = splitPath[splitPath.length-1];
    var filePath = ImagePath.split(imageName)[0];

    this.file.readAsDataURL(filePath,imageName).then(base64=>{
        this.croppedImagepath = base64;
        this.isLoading = false;
    },error=>{
      alert('Error in showing image' + error);
      this.isLoading = false;
    });
  }