检查图像（img HTML元素）是否受CORS保护的最快方法

Question

当我从网站复制图像（上下文菜单 - >复制图像）并将其粘贴到我的脚本（在contenteditable div中）时，我遇到了问题。 <img>出现在div中，但如果您尝试获取画布的图像数据，则drawImage <canvas>上的<img>尝试会导致错误：

您可以在画布上无错误地绘制，但不能检索像素数据或DataURL。对于此类图片，我希望使用CORS proxy来完全访问数据。

如何检测到我无权访问URL代码或try/catch的数据？什么是最快的方式？

我在image paste upload script for StackExchange中遇到了这个问题（并且仍有）。

修改：如果您仍不确定我的意思，请进一步解释此问题：

为什么{{1}}不是解决方案？

您可以在画布上绘制任何图像，甚至可以执行进一步的绘制操作：

^{The image source.它不允许使用CORS！}

为什么解析URL没有帮助？

某些远程图像允许CORS并且不会抛出任何错误。例如来自Gravatar的头像。

Answer 1

我想出了实际使用 try ... catch作为@wwwmarty suggested的解决方案。它可能不会像CPU速度那么快，而且有点迟钝，但它有效：

HTMLImageElement.prototype.isTainting = function() {

    var canvas = document.createElement("canvas");
    canvas.getContext("2d").drawImage(this,0,0);
    try {
       canvas.toDataURL(); 
       return true;
    }
    catch() {return false;};
    return false;
}

我也创造了相当大的fiddle where you can inspect behavior of the crossorigin attribute。