javascript - 捕获完整的画布图像

Question

我正在寻找一种将整个画布（包括移动到画布外的元素）捕获到图像的方法。我正在使用 KineticJS 库并且我知道该toDataURL功能。问题是图像被裁剪到画布边界。

作为一种解决方法，我想将画布上的所有元素复制到一个足够大以容纳所有元素的临时隐藏画布，然后使用该toDataURL功能。我想知道是否有更清洁的方法？

Answer 1

有趣的问题。我喜欢临时画布的想法。此外，您可以调整主画布的大小，对所有子元素应用偏移平移，捕获图像，然后反向平移并调整大小。这不会比复制到隐藏的画布更复杂。另外，单画布方法会更节省内存。

只是我的 3 美分。

Answer 2

我同意 Alvin 的观点，你可以调整画布的大小，方法如下：

 stage.setWidth(window.innerWidth);  // inner width of your window
 stage.setHeight(window.innerHeight); // inner height of your window
 stage.draw();    //redraw

这会将您的舞台大小调整为窗口的宽度和高度，但这不会考虑元素比窗口更远的可能性，但您可以修改 .set 函数中的数字以考虑最右边/留下一个。

如果您正在寻找一种将画布中的所有元素复制到另一个阶段的快速方法，您可以对其进行序列化：

  var json = stage.toJSON();
  var newStage = Kinetic.Node.create(stageJson, 'newContainer');