我使用dynamicJS实现了一个图表工具，现在我想生成一个包含从dynamicJS阶段捕获的图像的PDF。
看起来像这样：
我的dynamicJS 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)?
但就我而言，我有两个画布，因为我有两个图层。
我怎样才能做到这一点？
我真的需要这样做，这可能吗（我真的希望如此）？
在此先感谢大家。
最佳答案
您可以将舞台导出为图像：var stageImage = myStage.toImage();
如果您需要导出的舞台少于所有图层，则需要将所有所需的图层展平到一个画布中。
使用document.createElement创建内存中的画布，并将新画布元素的大小设置为与舞台相同。
实际上，所有KineticJS图层都是画布元素。将每一层绘制到内存画布上。您可以使用var layer1Canvas=layer.getCanvas()获取对每个图层的画布的引用，然后使用context.drawImage(layer1Canvas,0,0)将该画布绘制到内存中的画布中（与layer2相同）。
此时，您的2层已被展平到可以使用inMemoryCanvas.toDataURL导出的单个画布上。
关于javascript - 从dynamicJS div获取“打印屏幕”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29919222/