javascript - 如何修复 getImageData() 错误 Canvas 已被跨源数据污染？

Question

我的代码在我的本地主机上运行良好，但在网站上无法运行。

我从控制台收到此错误，对于这一行 .getImageData(x,y,1,1).data:

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 

我的部分代码:

jQuery.Event.prototype.rgb=function(){
        var x =  this.offsetX || (this.pageX - $(this.target).offset().left),y =  this.offsetY || (this.pageY - $(this.target).offset().top);
        if (this.target.nodeName!=="CANVAS")return null;
        return this.target.getContext('2d').getImageData(x,y,1,1).data;
    }

注意:我的图片 url (src) 来自子域 url

Answer 1

正如其他人所说，您正在通过从跨源域加载来“污染” Canvas 。

https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

但是，您可以通过简单地设置来防止这种情况:

img.crossOrigin = "Anonymous";

这仅在远程服务器正确设置以下 header 时有效:

Access-Control-Allow-Origin "*"

Dropbox file chooser使用“直接链接”选项时就是一个很好的例子。我在 oddprints.com 上使用它将远程保管箱图像 url 中的图像收集到我的 Canvas 中，然后将图像数据提交回我的服务器。全部在 javascript 中