使用drawImage时“可能无法导出已污染的画布” [英] 'Tainted canvases may not be exported' when using drawImage

问题描述

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

When trying to draw an image onto a canvas, and then saving the canvas to an image, I get the following error:

未捕获的SecurityError：无法在'HTMLCanvasElement'上执行'toDataURL'：可能无法导出污染的画布

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

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>

我知道可以在画布上绘制图像，因为删除该行后一切正常，您会看到红色框：

I know it's to do with drawing the image on the canvas because when that line is removed everything's okay and you can see the red box:

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;	
}

<canvas id="background" width=500 height=500></canvas>

因此，drawImage导致此操作失败。

So it's drawImage that causes this to fail.

我已经阅读了其他问题，解决方案是只需添加 image.setAttribute（'crossOrigin'，'anonymous'）; （或将它们放在同一个目录中（我通过将两个文件都放在桌面上进行了尝试），但似乎都没有为我解决。

I've read other questions and the solutions were "just add image.setAttribute('crossOrigin', 'anonymous');" (which I've done) or to put them in the same directory (I tried this by placing both files on desktop) but neither seemed to solve it for me.

是有没有解决或替代方法？我要做的就是将多张图像绘制到一张图像上。 （红色框仅用于显示。）

Is there a fix or an alternative method? All I want to do is draw multiple images onto one image. (The red box was just for show.)

推荐答案

我通过将两个文件都放在桌面

I tried this by placing both files on desktop

否。您需要一个Web服务器并在 http：// （或 https：// ）中打开文件被认为具有相同的血统。当您在 file：// 中打开文件时，即使您从同一目录中提供文件，也不会将它们视为同一来源。

No. You need a web server and to open your files in http:// (or https://) for them to be considered of the same origin. When you open your files in file://, they're not considered of the same origin, even if you serve them from the same directory.

这篇关于使用drawImage时“可能无法导出已污染的画布”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！