如何在javascript中创建DOM元素的快照

How to create snapshot of DOM element in javascript?

本文关键字：DOM 元素 快照 创建 javascript      更新时间：2023-09-26

我正在开发图书编辑器应用程序，它类似于ibooks作者谷歌幻灯片。因此，无论用户在右侧可编辑区域中输入了什么数据，我们都需要在左侧树视图中显示页面的小快照。我们可能需要非常频繁地更新快照。可编辑区域可以包含视频、图像、文本区域等。

我找到了一些转换html2canvas的解决方案。是否可以在没有画布的情况下创建高质量的快照，只使用css3缩放和javascript。如果可能的话，哪一个是性能的最佳解决方案（使用画布还是不使用画布）？

如果有人能链接相关文章或github代码，我将不胜感激。

仅CSS3&JavaScript。。。

嗯。。。如果只是为了显示（而不是导出屏幕截图），您可以在快照div上复制可编辑的屏幕元素，但使用CSS3:进行缩小

  // the snapshot div contains the same elements & layout as
  // the editable div, but the snapshot div is 1/5 the size
  // because of the scale transformation.
  #snapshot{
      -moz-transform: scale(0.20);
      -ms-transform: scale(0.20); /* IE 9 */
      -webkit-transform: scale(0.20); /* Chrome, Safari, Opera */
      transform: scale(0.20);
  }
相关文章：