Question

我尝试创建带有背景图片和文字的画布，通过用户输入按钮点击更新文本内容，然后将更新的画布转换为图像以便保存。

以下是我一直在做的事情的一个例子：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);
}

如果我没有指定背景图片，我可以使用以下代码将画布转换为图像：

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进行保存。我尝试重新设置背景图片，但这也不起作用。

编辑添加我得到的错误：＆＃34; Uncaught SecurityError：无法执行＆＃39; toDataURL＆＃39; on＆＃39; HTMLCanvasElement＆＃39;：可能无法导出受污染的画布。＆＃34;

任何帮助都将不胜感激。

Answer 1

来自previous answer

当图像从与当前域不同的域加载到画布上时，会出现受污染的画布。之后，画布无法保存到数据URL。

解决方案：

将所有与页面相关的文件（.html，.jpg，.js，.css等）放在桌面上（不在子文件夹中）。

将您的图片发布到支持跨域共享的网站（例如   dropbox.com）。请务必将图像放在Dropbox的公共文件夹中   并在下载图像时设置交叉原点标志（var   img = new Image（）; img.crossOrigin =＆＃34;匿名＆＃34; ...）

在开发计算机上安装Web服务器（IIS和PHP Web   服务器都有免费版本，可以在本地计算机上很好地工作。）

创建带背景图像的画布，动态更新文本，然后保存画布？

1 个答案: