创建带有背景图像的 canvas，动态更新文本，然后保存 canvas?

Question

我正在尝试创建一个带有背景图片和文本的 canvas，通过点击按钮时用户输入更新文本内容，然后将更新后的 canvas 转换为图片，以便保存它。

这是我一直在做的一个例子：https://jsfiddle.net/qrzd395p/

var c = document.getElementById('canvas');
var context = c.getContext('2d');
var backgroundImage = new Image();

backgroundImage.onload = function() {
   // Once the image has finished loading, draw the 
   // image and then the text.
   DrawScreen();
   DrawText();
};
backgroundImage.src = "http://lorempixum.com/200/200/";

function DrawScreen() {
   context.drawImage(backgroundImage, 0, 0);
}

function DrawText() {
   context.fillStyle = "red";
   context.font = "18px sans-serif";
   context.textBaseline = 'top';
   context.fillText("This is a test", 50, 100);
}

如果我不指定背景图片，我可以使用以下代码将 canvas 转换为图片：

function convertCanvasToImage(canvas) {
   var image = new Image();
   image.src = canvas.toDataURL("image/png");
   return image;
}

然后保存：

function downloadCanvas(link, canvasId, filename) {
   link.href = document.getElementById(canvasId).toDataURL();
   link.download = filename;
}

然而，一旦我对其进行了动态更新，我就无法将图像转换为 png 以进行保存。我已经尝试重新设置背景图像，但这也不起作用。

编辑以添加我得到的错误："Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."

如有任何帮助，我们将不胜感激。

Answer 1

来自previous answer

当图像从与当前域不同的域加载到 canvas 时，会发生受污染的 canvas。之后 canvas 无法保存到数据 URL。

解决方案：

Put all page related files (.html, .jpg, .js, .css, etc) on your desktop (not in sub-folders).

Post your images to a site that supports cross-domain sharing (like dropbox.com). Be sure you put your images in dropbox's public folder and also set the cross origin flag when downloading the image (var img=new Image(); img.crossOrigin="anonymous" ...)

Install a webserver on your development computer (IIS and PHP web servers both have free editions that work nicely on a local computer).

创建带有背景图像的 canvas，动态更新文本，然后保存 canvas?

Create a canvas with background image, dynamically update the text, then save the canvas?

html

javascript

jquery

canvas

html5-canvas