Crop base64 image about cordova-plugin-crop HOT 8 OPEN

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;
}
`

from cordova-plugin-crop.

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.

from cordova-plugin-crop.

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!

from cordova-plugin-crop.

@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!

from cordova-plugin-crop.

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
        });

from cordova-plugin-crop.

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

from cordova-plugin-crop.

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

from cordova-plugin-crop.

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;
	});
  }

from cordova-plugin-crop.