Question

嘿我正在尝试实现一个名为backgroundcheck的jquery插件，它给出了控制台日志错误： “Uncaught SecurityError：无法在'CanvasRenderingContext2D'上执行'getImageData'：画布已被跨源数据污染。”我已经完成了他在说明书中所做的一切，但它不起作用。任何帮助将不胜感激。

更新

这是下拉菜单中主要错误下的三个错误。

calculatePixelBrightness VM682 background-check.min.js:571
processTargets VM682 background-check.min.js:631
check VM682 background-check.min.js:766

这里也是screenshot。

Answer 1

<强> jsFiddle Demo

错误是图像位于不同域的结果。但是有一个令人惊讶的简单补救措施，即将属性crossDomain = "anonymous"添加到图像元素本身。

例如，

<img src="http://i.imgur.com/UnnoYbv.jpg" crossOrigin="anonymous" draggable="false" />

Answer 2

这个问题似乎重复：

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

解决方案可能是相同的。当您使用：file://path/to/your/file.html从磁盘加载html文件时，Google Chrome和Opera将引发错误，包括：imgData = ctx.getImageData(x1,y1,w,h);

解决方案很简单：启动Web服务器（apache，nginx）将您的html文件放在Web服务器的某处并加载您的html文件：http://localhost/somewhere/file.html

控制台日志：未捕获的SecurityError：无法执行＆＃39; getImageData＆＃39; on＆＃39; CanvasRenderingContext2D＆＃39;：画布受到跨源数据的污染

2 个答案: