Question

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

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

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

Answer 1

只有CSS3＆amp;的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);
  }

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

1 个答案: