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

Question

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

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

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

Answer 1

仅 CSS3 和 JavaScript...

hmmmmm...如果只是为了显示目的(而不是导出屏幕截图)，您可以只复制快照 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);
  }