从 kineticJS div 获取 "print screen"

Question

我使用 kineticJS 实现了一个图表工具，现在我想用从 kineticJS 阶段捕获的一些图像生成一个 PDF。

看起来像这样：

我的 kineticJS div 看起来像这样：

<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>

我想实现的是下图这样的效果，我在电脑上打印了一个画面，不知道怎么通过代码实现：

我查过这个信息

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

Save PNG Canvas Image to HTML5 Storage (JAVASCRIPT)?

但在我的例子中我有两个 canvas 因为我有两层。

我该怎么做？我真的需要这样做，这可能吗（我真的希望如此）？

在此先感谢大家。

Answer 1

您可以将舞台导出为图像：var stageImage = myStage.toImage();

如果您需要导出的图层少于舞台上的所有图层，您需要将所有需要的图层拼合成一个 canvas。

使用 document.createElement 创建内存中的 canvas 并将新的 canvas 元素的大小设置为与舞台相同。
所有 KineticJS 层实际上都是 canvas 元素。将每一层绘制到内存中 canvas。您可以使用 var layer1Canvas=layer.getCanvas() 获取对每个层的 canvas 的引用，然后使用 context.drawImage(layer1Canvas,0,0) 将 canvas 绘制到内存中的 canvas [与 layer2 相同].

此时您的 2 层已被拼合到一个 canvas 上，可以使用 inMemoryCanvas.toDataURL.

导出

从 kineticJS div 获取 "print screen"

Get "print screen" from kineticJS div

html

javascript

kineticjs