如何在使用addon sdk創建的插件中使用畫布drawWindow函數？

Question

我使用addon sdk創建了Firefox插件。我正在嘗試使用canvas drawWindow函數。

我有以下代碼來使用函數，其中ctx指的是一個畫布上下文，我得到了canvas.getContext("2d")。

ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)"); 

當我運行這段代碼，腳本內的連接使用

tabs.activeTab.attach({ 
    contentScriptFile: data.url("app.js") // app.js contains the above line of code 
}); 

我收到以下錯誤：

TypeError: ctx.drawWindow is not a function 

當我打電話的功能類似於此錯誤不會發生strokeRect和fillRect放在同一個ctx對象上。

this page上的文檔說您需要chrome權限才能使用該代碼，因此可能會出現問題。我希望根據功能的code發生一個不同的錯誤。

我發現我可以在我的插件中使用this的chrome特權，但接下來我會怎麼做使用ctx.drawWindow？當我運行代碼this question，從頁面上的暫存器而不是從一個插件，而不是一個「錯誤：操作是不安全的」，我得到相同的「例外：ctx.drawWindow是不是功能「。

所以，基本上我問的是，我將如何去使用畫布drawWindow在使用插件SDK創建的插件？

編輯：我想這樣做，因爲我需要一種方法來訪問呈現的頁面的個別像素。我希望將頁面繪製到畫布上，然後使用getImageData訪問像素。如果還有其他訪問單個像素的方法（在Firefox插件中），那也是有幫助的。

Answer 1

這是一個代碼片段，從SDK的舊tab-browser模塊中借用。這將使您獲得當前選項卡的縮略圖，而不必附加到選項卡本身。

var window = require('sdk/window/utils').getMostRecentBrowserWindow(); 
var tab = require('sdk/tabs/utils').getActiveTab(window); 
var thumbnail = window.document.createElementNS("http://www.w3.org/1999/xhtml", "canvas"); 
thumbnail.mozOpaque = true; 
window = tab.linkedBrowser.contentWindow; 
thumbnail.width = Math.ceil(window.screen.availWidth/5.75); 
var aspectRatio = 0.5625; // 16:9 
thumbnail.height = Math.round(thumbnail.width * aspectRatio); 
var ctx = thumbnail.getContext("2d"); 
var snippetWidth = window.innerWidth * .6; 
var scale = thumbnail.width/snippetWidth; 
ctx.scale(scale, scale); 
ctx.drawWindow(window, window.scrollX, window.scrollY, snippetWidth, snippetWidth * aspectRatio, "rgb(255,255,255)"); 
// thumbnail now represents a thumbnail of the tab 
console.log(thumbnail.toDataURL()); 

從這裏，你應該能夠通過getImageData來獲取數據，只是忽略了縮放部分，如果你不希望出現這種情況。