javascript - 打印分层的html5 Canvas

我有一个由多层画布组成的页面，我想将其变成一个图像（然后打印）。因此，对于一张画布来说很简单：capture-html-canvas-as-gif-jpg-png-pdf。

那么如何处理多层画布呢？到目前为止，我想到的唯一想法是创建另一张画布，然后将所有分层的画布按z顺序升序绘制到该画布中。可以，但是对原始画布进行快照会更有用。

最佳答案

将画布合并为一个“打印”画布是一种方法。

顺便说一句，如果你不知道...

context.drawImage(imageSource...将使用另一个画布作为imageSource。

因此，如果您需要完整（未组合）所有画布，只需创建一个新的仅限内存的画布，然后按z索引顺序将所有画布绘制到该新画布上：

var printCanvas=document.createElement('canvas');
var printCtx=printCanvas.getContext('2d');

printCtx.drawImage(canvasZIndex0,0,0);
printCtx.drawImage(canvasZIndex1,0,0);
printCtx.drawImage(canvasZIndex2,0,0);
printCtx.drawImage(canvasZIndex3,0,0);

var img=new Image();
img.onload=function(){
    // print this snapshot image
}
img.src=printCanvas.toDataURL();