如何截取 Google+ 等頁面截圖

Question

在使用 Google+ 的反饋后，我注意到它會截取屏幕截圖，並且還允許您執行突出顯示和黑屏等操作。 我想知道如何實現這一點； 基於您可以使用高光和黑點修改 DOM 的事實，我認為它只是將整個 DOM 轉換為圖像，但是，我不確定他們是如何做到這一點的。

我知道 PHP 有幾個功能，“imagegrabscreen”和“imagegrabwindow”，但它們只適用於 Windows 用戶，所以我懷疑這就是他們正在使用的。

所以，我的問題是他們如何將 DOM 變成圖像？

Answer 1

Google+ 不會完全在客戶端截取屏幕截圖。 它將本地（渲染的）DOM 發送到服務器，將其渲染為圖像，並返回創建的圖像。

您可以通過向頁面添加本地圖像（使用 Firebug）來測試這一點，然后嘗試創建反饋。 該圖像將不存在。

Answer 2

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

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

它不需要來自服務器的任何渲染，因為整個圖像是在客戶端瀏覽器上創建的。 HTML2Canvas 腳本本身仍處於非常實驗性的 state 中，因為它幾乎無法解析我想要的 CSS3 屬性，即使有可用的代理，它也不支持加載 Z5A8FEFF0B4BDE3EEC9244B76023 圖像。

仍然相當有限的瀏覽器兼容性（不是因為無法支持更多，只是沒有時間讓它更多地支持跨瀏覽器）。

有關更多信息，請查看此處的示例：

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

Answer 3

我的猜測是他們收集了有關頁面的信息，突出顯示的塊等。在 memory 版本的 web 瀏覽器中呈現該頁面並對其進行截圖。

編輯清除：

如果客戶端正在查看http://some.page?someArg=someValue

服務器在 memory 瀏覽器中渲染http://some.page?someArg=someValue並截圖，將圖像發送給客戶端。