获取＆＃34;打印屏幕＆＃34;来自kineticJS div

Question

我使用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)?

但在我的情况下，我有两个画布，因为我有两层。

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

先谢谢你们。

Answer 1

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

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

• 使用document.createElement创建一个内存中画布，并将新画布元素的大小设置为与舞台相同。

• 所有KineticJS图层实际上都是canvas元素。将每个图层绘制到内存中的画布上。您可以使用var layer1Canvas=layer.getCanvas()获取对每个图层画布的引用，然后使用context.drawImage(layer1Canvas,0,0) [和与layer2相同]将该画布绘制到内存中画布。

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