Question

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

那么如何处理多层画布呢？到目前为止我想出的唯一想法是创建另一个画布并将所有分层画布绘制成具有升序z顺序的画布。会起作用，但拍摄原始画布的快照会更有帮助。

Answer 1

将您的画布组合成一个“印刷”画布是可行的方法。

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

context.drawImage(imageSource...将采用另一个画布，因为它是imageSource。

因此，如果您需要所有画布完整（未组合），只需创建一个新的仅内存画布并以z-index顺序将所有画布绘制到该新画布上：

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

打印分层的html5画布

1 个答案: