部分屏幕截圖與鉻

我想建立我的第一個Chrome擴展，並希望它採取截圖。我知道Chrome有一個captureVisibleTab API來獲取屏幕的可見區域。我已經得到這個工作。但是，我希望能夠進行部分屏幕截圖（例如用戶點擊並在屏幕上拖動鼠標以選擇某個矩形區域的內容）。這在Chrome上如何工作？我沒有看到此API的API，但我知道Awesome Screenshot和其他一些屏幕截圖擴展可以做到這一點。部分屏幕截圖與鉻

我使用.mouseup和.mousedown來檢測鼠標點擊，並且使用event.pageX和event.pageY來獲取頁面上的座標。但是，如何獲得一個矩形顯示在頁面上？我必須將網頁轉換爲畫布，但我不太清楚如何做到這一點。另外，一旦我得到選定的區域，我該如何將其轉換爲圖像並獲取dataURI，就像Chrome API提供的返回值一樣？

我應該用其他方式來改變它嗎？謝謝你的幫助！

來源

2015-07-12 llams48

有現有的s.o.顯示如何轉換爲畫布的問題。 –

我會建議首先生成整個屏幕截圖（example），然後根據您收集的用戶數據進行裁剪。您可以使用JavaScript和HTML5 <canvas>元素裁剪圖像。（example code）

至於將網頁轉換爲<canvas>元素，請採用初始屏幕快照，使用drawImage()函數將其顯示在畫布上。

然後，您可以使用「example code」中顯示的方法或cropper等庫在UI屏幕上繪製矩形。

example code也可以告訴你如何將選定的區域變成dataURI。

來源

2015-07-12 22:34:00 andrewgu

作爲一般說明，僅鏈接到示例代碼是不好的。這裏有很多示例，因此將所有內容複製都是不切實際的或潛在的版權問題，但至少要爲每個示例添加一兩個描述方法。 – Xan

@ fond42518感謝您的幫助和詳細的例子！我瞭解如何從您提供的鏈接調整大小。但是，我仍然不確定如何讓起始和結束座標的矩形顯示在原始網頁上。我希望它與其他屏幕截圖擴展的UI類似（例如Awesome Screenshot）。我怎樣才能讓網頁變灰，並在網頁上顯示網格指針和矩形選區？這就是我將網頁轉換爲畫布的意思。我不想在另一個選項卡上創建畫布，然後調整大小。 – llams48

部分屏幕截圖與鉻

回答

相關問題