rails - 使用HTML5/Canvas/JavaScript進入瀏覽器屏幕截圖




rails html2canvas (2)

通過Google的“報告錯誤”或“反饋工具”,您可以選擇瀏覽器窗口的某個區域,以創建一個屏幕截圖,其中附有關於錯誤的反饋。

Jason Small截圖,張貼在一個重複的問題

他們如何做到這一點? 谷歌的JavaScript反饋API從here加載, 他們對反饋模塊的概述將演示截圖功能。


JavaScript可以讀取DOM並使用canvas呈現相當準確的表示。 我一直在研究一個將HTML轉換為canvas圖像的腳本。 今天決定將其實施為發送您所描述的反饋。

該腳本允許您創建反饋表單,其中包括在客戶端瀏覽器上創建的屏幕截圖以及表單。 屏幕截圖基於DOM,因此它可能不是100%準確的真實表示,因為它不會製作實際的屏幕截圖,而是根據頁面上提供的信息構建屏幕截圖。

不需要來自服務器的任何呈現 ,因為整個圖像是在客戶端瀏覽器上創建的。 HTML2Canvas腳本本身仍處於非常實驗性的狀態,因為它不會解析我希望的CSS3屬性的幾乎所有的屬性,即使代理可用,它也不支持加載CORS映像。

瀏覽器的兼容性還是相當有限的(不是因為更多的不支持,只是沒有時間讓它更支持跨瀏覽器)。

欲了解更多信息,請看這裡的例子:

http://hertzen.com/experiments/jsfeedback/

編輯 html2canvas腳本現在可單獨here和一些例子在這裡

編輯2谷歌反饋團隊的Elliott Sprehn在本演示中可以找到Google使用非常類似的方法的另一個確認(實際上基於文檔,唯一的區別是它們的異步遍歷/繪圖方法): http://www.elliottsprehn.com/preso/fluentconf/


您的網絡應用程序現在可以使用getUserMedia()獲取客戶端整個桌面的“原生”屏幕截圖:

看看這個例子:

https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/

客戶端必須使用chrome(現在),並且需要在chrome://標誌下啟用屏幕截圖支持。







screenshot