Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to check, if a canvas element has been tainted?

Tags:

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