使用HTML5畫布捕捉網頁的一部分？

我知道您可以使用畫布從HTML5視頻流中捕捉圖像並將它們顯示在頁面上。我感興趣的是，您可以使用畫布對象在網頁頂部創建疊加層，然後捕獲該頁或其一部分的PNG快照。使用HTML5畫布捕捉網頁的一部分？

我想通過添加屏幕截圖（在瀏覽器頁面中）來增強我們的網站評論工具，然後將其提交給遠程服務器。

YouTrack用Java applet做到這一點，但現代HTML5技術有可能嗎？

任何其他建議解決這個問題也將不勝感激。

謝謝

2011-06-24 Richard

我敢肯定，支持畫布所有的瀏覽器做離屏繪製命令後呈現然後複合到網頁中，這樣就會使這個不可能的。抱歉。 –

[使用HTML5/Canvas/Javascript獲取截圖]的可能重複（http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots） – ChrisF

看看[Screensharing a瀏覽器選項卡在HTML5]（http://www.html5rocks.com/en/tutorials/streaming/screenshare/）。這是關於屏幕共享，但你可以簡化這只是一個單一的頁面截圖。 – falconepl

這會被問到很多。簡短的回答是，出於安全原因無法完成。

較長的答案包括提及只有FireFox具有的drawWindow函數，該函數僅在本地工作（同樣出於安全原因）。將來它可能會在用戶授予許可時運行，比如今天的Java小程序。將來，它甚至可能成爲規範的一部分，而不是Mozilla所做的一次性事情。

如果你感覺很瘋狂，可以嘗試製作一個完整的HTML渲染器，爲該頁面提取DOM樹，並嘗試在Canvas中渲染它。這是一個傻瓜的差事。

來源

2011-06-24 14:05:43

您可以通過閱讀DOM並使用JavaScript創建一個帶有javascript的畫布圖像來「模擬」屏幕視圖。查看http://hertzen.com/experiments/jsfeedback/和底層html2canvas腳本，瞭解如何使用純粹的Javascript（不需要插件或服務器交互）來完成此任務。

來源

2011-07-13 16:36:56 Niklas

有可能將HTML嵌入到SVG圖像中並將該SVG呈現到畫布中。 HTML可以包含什麼限制（例如沒有JavaScript和沒有外部資源，因此圖像必須在數據URL中進行編碼）。牢記這一點，它可能會做你的工作。

該技術被記錄和演示on MDN。

來源

2012-11-30 19:19:12 user7610

該腳本允許您直接在用戶瀏覽器上截取網頁或其部分的「截圖」。屏幕截圖基於DOM，因此它可能不是100％準確的真實表示，因爲它不會製作實際的屏幕截圖，而是根據頁面上提供的信息構建屏幕截圖。

http://html2canvas.hertzen.com/

來源

2013-07-12 17:43:41 RWHepburn