如何将 kineticjs 阶段复制到另一个画布答案

【问题标题】：How to copy a kineticjs stage to another canvas如何将 kineticjs 阶段复制到另一个画布
【发布时间】：2016-01-26 20:39:28
【问题描述】：

我正在编写一个应用程序，其中一个页面上可能有数百个画布。我没有为每个画布单独设置一个舞台的开销，而是决定让一个编辑器拥有一个舞台。编辑完成后，它应该将舞台内容复制到另一个画布。

Stage 提供 toImage 和 toDataURL 来获取内容，但是根据此性能测试，与 context.drawImage 相比，这两种方法都非常慢。

由于我在舞台中只使用一个图层，而一个图层包含一个画布，我想我可以这样做：

desticationCtx.drawImage(layer.getContext().canvas, 0,0);

不幸的是，它没有产生任何结果（它确实运行）

由于一个阶段有一个 bufferCanvas 我也尝试过：

destinationCtx.drawImage(this.stage.bufferCanvas.element,0,0);

虽然我可以在页面上的舞台画布上看到内容，但仍然没有结果。

但是，如果我深入我的页面以获取由 kineticjs 创建和使用的实际画布：

destinationCtx.drawImage(document.getElementById('mydiv').children[0].children[0],0,0);

我确实得到了结果。将 kineticjs 舞台内容复制到另一个画布的正确方法是什么？

【问题讨论】：

【解决方案1】：

像这样访问图层画布元素：

var canvasElement = layer.getCanvas().getElement();

还有这样的上下文：

var context = layer.getCanvas().getContext();

这里是感兴趣的文档：

【讨论】：

我发誓我以前尝试过，但是很可惜，它确实有效，而且肯定比我所做的糟糕假设要好：document.getElementById('mydiv').children[0].children[0 ]

【解决方案2】：

使用最新版本的 kineticjs，来自正确标记答案的方法不再起作用。现在我只是使用以下方法来获取 kineticjs 主画布 - 在 jquery 的帮助下：

var canvas = $('#canvasDiv').find('canvas');
console.log("Canvas: %O", layerCanvas);

只需替换

 #canvasDiv

您的容器的 ID。

【讨论】：