打印分層的html5畫布

Question

我有一個由多層畫布組成的頁面，我想將其變成一個圖像（然后打印）。 因此，對於一張畫布來說很簡單： capture-html-canvas-as-gif-jpg-png-pdf 。

那么如何處理多層畫布呢？ 到目前為止，我想到的唯一想法是創建另一張畫布，然后將所有分層的畫布按z順序升序繪制到該畫布中。 可以，但是對原始畫布進行快照會更有用。

Answer 1

將畫布合並為一個“打印”畫布是一種方法。

順便說一句，如果你不知道...

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();