如何检查画布元素是否已被污染？

基本场景

我正在客户端加载几张图像。其中一些来自另一个域，一些则不是。有些我可以使用crossOrigin属性 https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes，有些则不然。

基本要求是检索dataURL https://developer.mozilla.org/en-US/docs/data_URIs尽可能获取图像。

Question

将图像绘制到 canvas 元素后（我需要获取 dataURL，对吧？），我怎样才能检查，没有try ... catch块，画布是否被污染？如果画布被污染了，我就不能使用toDataURL()不再（see MDN https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F).

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

这是一个不向本机对象添加属性的解决方案：

function isTainted(ctx) {
    try {
        var pixel = ctx.getImageData(0, 0, 1, 1);
        return false;
    } catch(err) {
        return (err.code === 18);
    }
}

现在只需执行以下操作即可检查：

if (isTainted(ctx)) alert('Sorry, canvas is tainted!');

编辑：现在我看到你想要一个没有 try-catch 的解决方案。不过，这是检查的正确方法，因为没有向用户公开原始干净标志（仅供内部使用）。向本机对象添加属性是not受到推崇的。