Search code examples
javascripthtmlkineticjs

Get "print screen" from kineticJS div

I implemented a diagram tool using kineticJS and now I want to generate a PDF with some images captured from the kineticJS stage.

It looks like this:

enter image description here

My kineticJS div looks like this:

<div id="canvasDrawingArea" style="height: 650px; width: 1150px;">
<div class="kineticjs-content" role="presentation" style="position: relative; display: inline-block; width: 1150px; height: 650px;">
<canvas width="1150" height="650" style="padding: 0px; margin: 0px; border: 0px; position: absolute; top: 0px; left: 0px; width: 1150px; height: 650px; background: transparent;"></canvas>
<canvas width="1150" height="650" style="padding: 0px; margin: 0px; border: 0px; position: absolute; top: 0px; left: 0px; width: 1150px; height: 650px; background: transparent;"></canvas>
</div>
</div>

What I want to achieve is a image like the one below, I did a print screen in my computer, but I don't know how to achieve this through code:

enter image description here

I have checked this information

Capture HTML Canvas as gif/jpg/png/pdf?

Save PNG Canvas Image to HTML5 Storage (JAVASCRIPT)?

but in my case I have two canvas because I have two layers.

How can I do this? I really need to do this, is this possible (I really hope so)?

Thanks in advance guys.

Solution

  • You can export the stage as an image: var stageImage = myStage.toImage();

    If you need to export less than all layers on the stage, you need to flatten all the desired layers into a single canvas.

    • Create an in-memory canvas using document.createElement and set the new canvas element's size to be the same as the stage.

    • All KineticJS layers are actually canvas elements. Draw each layer onto the in-memory canvas. You can get a reference to each layer's canvas with var layer1Canvas=layer.getCanvas() and then draw that canvas to the in-memory canvas using context.drawImage(layer1Canvas,0,0) [and the same with layer2].

    At this point your 2 layers have been flattened onto a single canvas that can be exported using inMemoryCanvas.toDataURL.