Question

如何从多个画布制作一个单一的IMG？我想在我的网络应用程序上创建一个按钮，该按钮将从更多重叠的画布制作一个单独的图像。我找到了这个选项，但我不知道如何使它与多个画布一起工作到单个图像。谢谢

function print() {
var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
}

Answer 1

只需将画布绘制到主画布中：

假设他们有身份证明：

var canvasMain = document.getElementById('canvasMain'); //destination canvas
var ctx = canvasMain.getContext('2d');

var canvas1 = document.getElementById('canvas1');       // layer 1
var canvas2 = document.getElementById('canvas2');       // layer 2
var canvas3 = document.getElementById('canvas3');       // layer 3

ctx.drawImage(canvas1, 0, 0);    // draw canvas 1 into main canvas
ctx.drawImage(canvas2, 0, 0);    // draw canvas 2 into main canvas
ctx.drawImage(canvas3, 0, 0);    // draw canvas 3 into main canvas

var dataUri = canvasMain.toDataURL(); //extract main canvas as url

希望这有帮助！

从多幅画布制作图像

1 个答案: