Basic scenario
I'm loading several images on the client side. Some of them are from another domain, some are not. Some I may be able to access using the crossOrigin
attribute, some not.
The basic requirement is to retrieve a dataURL for the images where possible.
Question
After drawing the image to the canvas element (which I need to to to get a dataURL, right?), how can I check, without a try ... catch
block, whether the canvas has been tainted? If the canvas is tainted, I can't use toDataURL()
anymore (see MDN).
var image = new Image(),
canvas = document.createElement( 'canvas' ),
context = canvas.getContext( '2d' );
image.onload = function(){
// adjust dimensions of canvas
canvas.width = image.width;
canvas.height = image.height;
// insert image
context.drawImage( image, 0, 0 );
// how to check here?
// get dataurl
dataurl = tmpCanvas.toDataURL();
// do stuff with the dataurl
};
image.src = src; // some cross origin image
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With