'受污染的画布可能不会被出口'使用drawImage时

时间:2016-01-17 15:46:51

标签: javascript canvas

尝试将图像绘制到画布上,然后将画布保存到图像时,出现以下错误:

  

Uncaught SecurityError:无法执行' toDataURL' on' HTMLCanvasElement':可能无法导出受污染的画布



var picture = new Image();
picture.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png";
var canvas = document.getElementById("background");
var context = canvas.getContext("2d");
function generate(){
	var ctx = document.createElement("canvas").getContext("2d");
		ctx.canvas.width = canvas.width;
		ctx.canvas.height = canvas.height;
	ctx.fillStyle = "red";	
	ctx.rect (0, 0, 40, 40);
	ctx.fill();

	ctx.drawImage(picture,0,0);
	
	image = new Image();
	image.setAttribute('crossOrigin', 'anonymous');
	image.src = ctx.canvas.toDataURL("image/png");		
}
function draw(){
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.drawImage(image, 0,0,100,100,0,0,100,100);	
}
function play(){
  generate();
  setInterval(function(){draw();}, 0.0333);
}

window.onload = function(){
	if(picture.complete)play();
	else picture.onload = play;	
}

<canvas id="background" width=500 height=500></canvas>
&#13;
&#13;
&#13;

我知道在画布上绘制图像是因为当删除该行时,一切都没问题,你可以看到红色框:

&#13;
&#13;
var picture = new Image();
picture.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png";
var canvas = document.getElementById("background");
var context = canvas.getContext("2d");
function generate(){
	var ctx = document.createElement("canvas").getContext("2d");
		ctx.canvas.width = canvas.width;
		ctx.canvas.height = canvas.height;
	ctx.fillStyle = "red";	
	ctx.rect (0, 0, 40, 40);
	ctx.fill();
	
	image = new Image();
	image.setAttribute('crossOrigin', 'anonymous');
	image.src = ctx.canvas.toDataURL("image/png");		
}
function draw(){
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.drawImage(image, 0,0,100,100,0,0,100,100);	
}
function play(){
  generate();
  setInterval(function(){draw();}, 0.0333);
}

window.onload = function(){
	if(picture.complete)play();
	else picture.onload = play;	
}
&#13;
<canvas id="background" width=500 height=500></canvas>
&#13;
&#13;
&#13; 所以它的drawImage会导致失败。

我已经阅读了其他问题,解决方案是&#34;只需添加image.setAttribute('crossOrigin', 'anonymous');&#34; (我已经完成了)或将它们放在同一个目录中(我通过将这两个文件放在桌面上来尝试这个)但似乎都没有解决它。

是否有修复或替代方法?我想要做的就是在一张图像上绘制多个图像。 (红色的盒子只是为了展示。)

1 个答案:

答案 0 :(得分:3)

  

我通过将两个文件放在桌面上来尝试这个

没有。您需要一个Web服务器,并在http://(或https://)中打开您的文件,以便将它们视为同一来源。当您在file://中打开文件时,即使您从同一目录中提供文件,也不会将其视为同一来源。