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

Question

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

我有以下代碼來使用該函數，其中ctx指的是canvas上下文，我使用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

當我在同一個ctx對象上調用strokeRect和fillRect等函數時，不會發生此錯誤。

此頁面上的文檔說您需要chrome權限才能使用代碼，因此可能會出現問題。 基於函數的代碼 ，我希望會出現不同的錯誤。

我發現我可以在使用我的插件鉻特權這個 ，但我會怎么做未來使用ctx.drawWindow？

另外，當我在這個問題中運行代碼時，從頁面上的暫存器，而不是從插件，而不是“錯誤：操作是不安全的”，我得到相同的“例外：ctx.drawWindow不是一個函數”。

所以，基本上我要問的是，如何使用addon sdk創建的插件中使用canvas drawWindow？

編輯：我正在嘗試這樣做因為我需要一種方法來訪問渲染頁面的各個像素。 我希望將頁面繪制到畫布，然后使用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獲取數據，如果你不想這樣，就忽略縮放部分。