如何修复getImageData（）错误画布已被跨域数据污染？

javascript html html5-canvas

2022-08-30 02:24:29

我的代码在我的本地主机上工作得很好，但它在网站上不起作用。

我从控制台收到此错误，对于此行：.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;
    }

注意：我的图片网址（src）来自子域网址

答案 1

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

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

但是，您只需设置：

img.crossOrigin = "Anonymous";

仅当远程服务器适当地设置了以下标头时，此方法才有效：

Access-Control-Allow-Origin "*"

使用“直接链接”选项时，Dropbox文件选择器就是一个很好的例子。我在 oddprints.com 使用它，将图像从远程 Dropbox 图像 URL 上传到我的画布中，然后将图像数据提交回我的服务器。全部在 javascript 中

答案 2

我发现我必须使用并且必须将时间戳附加到URL的查询字符串中，以避免缺少标头的304响应。.setAttribute('crossOrigin', '')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', '');