Javascript 保存画布背景和画布内容

我认为这是一个常见的问题，但我似乎找不到一个简单的解决办法。我有一个带有背景图像的画布（我实际上使用的是sketch.js，但我认为这并不重要），例如一个风暴士兵：

然后，我通过Sketch.js允许用户在其上书写涂鸦：

从画布获取图像时，我仅获取画布图像：

我真正想要的是两者兼而有之（就像它在屏幕上的样子，上面的第二张截图）

我尝试将背景图像重新合并，但没有成功。最终，这个结果会被推送到S3——所以我不是在寻找一种方法将其推送到另一个HTML元素中，我更喜欢同时抓取画布和背景。但如果不可能，我想一定会发生某种形式的合并

HTML:

---

有没有一个简单的方法可以做到这一点？请注意，背景图像也从S3中提取…

在使用Canvas之前，我做了类似的工作。你可能遇到了和我一样的问题。可能有两张画布。一个有图像，一个有你的画。我不确定Canvas的名称是什么，所以我使用

document.getElementsByTagName（'Canvas'）[0]用Javascript选择了第一个和第二个Canvas元素‌

如果您使用drawImage，您可以将它们堆叠在一起，它将合并它们。640x480是我得到的图像的尺寸。你应该把那部分换成你的

var canvas = document.getElementById("tools_sketch_inlinephoto");
var context = canvas.getContext('2d'); 

// Flatten the canvas background and effects 
context.drawImage(document.getElementsByTagName('canvas')[0]‌​, 0, 0, 640, 480); 
context.drawImage(document.getElementsByTagName('canvas')[1]‌​, 0, 0, 640, 480);

var savedImage = new Image();
savedImage.src = canvas.toDataURL("image/png");

使用html2canvas库保存画布背景
带画布内容

var c = document.getElementById("canvas");
html2canvas (c, {
    onrendered: function (canvas) {
        var blob = canvas.toDataURL();
        var pika = document.createElement("a");
        pika.href = blob;
        var d = new Date();
        pika.download = d+".png";
        pika.click();
    }
})

上面的代码以png图像的形式下载画布背景和画布内容。别忘了包含库
在使用Canvas之前，我做过类似的事情。你可能遇到了和我一样的问题。可能有两张画布。一个有图像，一个有你的画。如果你把它们画在一起，它会合并它们。示例：
var snapshot=document.getElementById（'snapshot'）；var context=snapshot.getContext（'2d'）；//展平画布背景和效果context.drawImage（document.getElementsByTagName（'canvas'）[0]，0,060480）；drawImage（document.getElementsByTagName（'canvas'）[1]，0,060480）@wes4谢谢。因此，在本例中，[0]是背景，[1]是用户正在写入的画布部分吗？如果以这种方式执行，canvas.toDataURL（）是否会返回合并的文本？文本与注释有点混乱，因此我将其放在下面的答案中。没错。我使用了canvas.toDataURL（“image/png”）javascript似乎对context.drawImage（document.getElementsByTagName（'canvas'）[0]非常不满意‌​, 0, 0, 640, 480);  context.drawImage（document.getElementsByTagName（'canvas'）[1]‌​, 0, 0, 640, 480); 你知道为什么吗？你是否改变了最后的尺寸640x480来匹配你的尺寸？是的。这是上面的两行-它们甚至不编译。这里是我所拥有的：var canvas=document.getElementById（“tools\u sketch\u inlinephoto”）；var cnxt=canvas.getContext（'2d'）；//展平画布背景和效果cnxt.drawImage（document.getElementsByTagName（'canvas'）[0]‌​, 0, 0, 500, 700);              cnxt.drawImage（document.getElementsByTagName（'canvas'）[1]‌​, 0, 0, 500, 700);  甚至不会在浏览器崩溃时运行。太奇怪了
var canvas = document.getElementById("tools_sketch_inlinephoto");
var context = canvas.getContext('2d'); 

// Flatten the canvas background and effects 
context.drawImage(document.getElementsByTagName('canvas')[0]‌​, 0, 0, 640, 480); 
context.drawImage(document.getElementsByTagName('canvas')[1]‌​, 0, 0, 640, 480);

var savedImage = new Image();
savedImage.src = canvas.toDataURL("image/png");

var c = document.getElementById("canvas");
html2canvas (c, {
    onrendered: function (canvas) {
        var blob = canvas.toDataURL();
        var pika = document.createElement("a");
        pika.href = blob;
        var d = new Date();
        pika.download = d+".png";
        pika.click();
    }
})