如何解决getImageData()错误 :The canvas has been tainted by cross-origin data?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (78)

我的代码在我的本地主机上运行得很好,但是它不能在站点上运行。

我从控制台得到了这个错误,这行.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。

提问于
用户回答回答于

我发现我不得不用.setAttribute('crossOrigin', '')必须在URL的查询字符串中附加时间戳,以避免304响应缺少Access-Control-Allow-Origin

这给了我

var url = 'http://lorempixel.com/g/400/200/';
var imgObj = new Image();
imgObj.src = url + '?' + new Date().getTime();
imgObj.setAttribute('crossOrigin', '');
用户回答回答于

可以通过简单设置来防止此问题:

img.crossOrigin = "Anonymous";

这只适用于远程服务器适当设置以下标题:

Access-Control-Allow-Origin "*"

扫码关注云+社区