在应用过滤器的画布上调用getImageData时的SecurityError

Question

我试图为噪声生成生成衰减纹理，为了实现这一点，我需要为任意绘制的形状生成平滑渐变。我在html5画布中使用高斯模糊来做这件事。在应用过滤器后出于某种原因，即使我稍后将其删除，当我尝试获取图像数据时，我也会遇到SecurityError。现在我意识到这意味着什么，但它打败了我为什么它会被抛到这里，因为图像是在飞行中生成的，这里没有任何交叉起源。也出于某种原因，它只发生在Firefox上，而它在Chrome上运行完美。

所以是的，是吗？

请参阅下面的示例。

＆＃13;

＆＃13;

var canvas = document.createElement("CANVAS");
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");

ctx.clearRect(0, 0, 1024, 1024);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 1024, 1024);

ctx.filter = "blur(20px)";
ctx.fillStyle = "white";
ctx.fillRect(30, 30, 200, 100);
ctx.filter = "none";

var img = ctx.getImageData(0, 0, 200, 200);
for(var i = 0; i < img.data.length; i+=4)
	img.data[i] = 255;
ctx.putImageData(img, 0,0);

＆＃13;

＆＃13;

＆＃13;