用JavaScript爲Firefox插件捕獲瀏覽器屏幕（完整且可見）

Question

標題非常明瞭，但我會在這裏進行更深入的解釋。我爲我的圖像託管網站（目前正在關閉）提供Firefox擴展。

目前，它有兩個特點：

• 圖像和遠程上傳右鍵
• 的圖片用鼠標右鍵點擊，得到一個JavaScript彈出輸入新的寬度和上傳

什麼擴展仍然需要一個功能（或兩個），它允許用戶在瀏覽器上上傳當前可見的內容或完全捕獲瀏覽器（包括滾動條下的內容）。

我曾嘗試：

我試圖從其他擴展複製各個部分的代碼，並用自己的將它們結合起來。他們包括我不太瞭解的東西，如canvas。我能夠以某種方式得到一個base64圖像字符串（我不記得如何）。用這個字符串，我認爲實現我的目標的最好方法是通過XMLHttpRequest發送給我的圖像主機，並在我的主機中創建圖像。 ResponseText將成爲圖像的鏈接。

正如你所看到的，我在這裏做得太多 - 我顯然不需要在服務器端爲這個問題做額外的處理。我認爲有些方法可以處理來自擴展名的所有內容，而無需在服務器端進行額外編碼（如果我錯了，請糾正我）。

實際問題

這是附加：https://addons.mozilla.org/en-US/firefox/addon/imgit/
正如你可以看到，獲得由擴展增加了兩種上下文菜單，我需要一個第三上下文菜單，其中有一個箭頭向右打開帶有兩個新選項的另一個菜單我需要：

• 捕捉可視屏幕，並上傳
• 捕捉全屏，並上傳

第一個選項應該捕獲並上傳瀏覽器中可見的內容，不包括滾動條下的內容。第二個選項應該捕獲所有內容並將其上傳到我的網站，包括滾動條下的內容。

添加上下文菜單並不是什麼大不了的事情，但是讓他們按我想要的方式行事就是我的問題。我不知道如何開始，我的網絡研究無法讓我更進一步。通過Javascript以某種方式創建圖像（使用canvas，我不知道如何），併發送一個base64編碼的字符串到我的網站實際上可以工作，但拍攝快照並使其base64編碼是問題。我也不確定Firefox擴展是否真的讓我使用Ajax發送/接收數據。

我需要你的東西

我需要一個邏輯的方法解決這個問題。如果你有一個想法，請回答並顯示代碼片段將非常感激。我不是一個JavaScript大師，但有一些關於如何開始的信息，我可以讓自己擺脫這個混亂。

什麼是實現我想要的最佳方式？

Answer 1

查看devtools'screenshot命令的grabScreen函數。