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');

捕获完整的画布图像

2 个答案: