如何在JavaScript中創建DOM元素的快照？

Question

我正在開發類似於ibooks作者，google幻燈片的圖書編輯器應用程序。 因此，無論數據用戶在右側可編輯區域中輸入什么，我們都需要在左側樹視圖中顯示頁面的小快照。 我們可能需要非常頻繁地更新快照。 可編輯區域可能包含視頻，圖像，文本區域等。

我找到了一些可以轉換html2canvas的解決方案。 是否可以僅使用css3縮放和javascript來創建沒有畫布的高質量快照。 如果可能的話，哪種性能（帶畫布或不帶畫布）的最佳解決方案是什么？

如果有人可以鏈接相關文章或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);
  }