如何在使用插件 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

当我在同一个 ctx 对象上调用 strokeRect 和 fillRect 等函数时，不会出现此错误。

this page 上的文档说您需要 chrome 权限才能使用代码，所以这可能是个问题。根据函数的code，我预计会出现不同的错误。

我发现我可以在我的插件中使用 this chrome 权限，但是接下来我要如何使用 ctx.drawWindow？

另外，当我从页面上的暂存器而不是插件而不是“错误：操作不安全”运行this question 中的代码时，我得到相同的“异常：ctx.drawWindow不是函数”。

所以，基本上我要问的是，我将如何在使用插件 sdk 创建的插件中使用画布 drawWindow？

编辑：我正在尝试这样做，因为我需要一种方法来访问呈现页面的各个像素。我希望将页面绘制到画布上，然后使用getImageData 访问像素。如果有其他方法可以访问单个像素（在 Firefox 插件中），那也会很有帮助。

Answer 1

这是一个代码 sn-p，从 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 获取数据，如果您不希望这样做，只需忽略缩放部分。