打印分层的html5画布

Question

I have a page composed of multiple layered canvases, which I would like to turn into one image (and then print). So for one canvas it's simple: capture-html-canvas-as-gif-jpg-png-pdf .

So what to do with multiple layers of canvases? The only idea I came up with so far is to create another canvas and paint all the layered canvases into this one with ascending z-order. Will work, but taking a snapshot of the original canvases would be more helpful.

Answer 1

Combining your canvases into a single "print" canvas is the way to go.

BTW, in case you didn't know...

context.drawImage(imageSource... will take another canvas as it's imageSource.

Therefore, if you need all your canvases intact (uncombined), just create a new in-memory-only canvas and draw all canvases onto that new canvas in z-index order:

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