Open RupenAnjaria opened 8 years ago
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.
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!
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; } `
@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!
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
});
@dhaCara dataURL = canvas.toDataURL('image/jpeg') will return SecurityError (DOM Exception 18): The operation is insecure in IOS > 10.
This is a really nice solution with canvas that avoids the browser security error https://www.sitepoint.com/an-in-depth-look-at-cors/
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;
});
}
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 }); }
Any idea why? It does not generated any error.