捕获完整的画布图像

Posted 2023-03-05

【中文标题】捕获完整的画布图像

【英文标题】：Capture full canvas image

【发布时间】：2013-01-01 11:26:37

【问题描述】：

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

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

【参考方案1】：

我同意 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】：

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

只要我的 3 美分。