从 kineticJS div 获取“打印屏幕”答案

【问题标题】：Get "print screen" from kineticJS div从 kineticJS div 获取“打印屏幕”
【发布时间】：2015-07-07 07:00:40
【问题描述】：

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

看起来像这样：

我的 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)?

但就我而言，我有两个画布，因为我有两个图层。

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

提前谢谢各位。

【问题讨论】：

标签： javascript html kineticjs

【解决方案1】：

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

如果您需要导出的图层少于舞台上的所有图层，则需要将所有需要的图层展平到一个画布中。

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

此时，您的 2 个图层已被展平到可以使用 inMemoryCanvas.toDataURL 导出的单个画布上。

【讨论】：

非常感谢！在您的指导和我在 stackoverflow 上检查的其他一些东西下，我能够实现我想要的。