5

我使用插件 sdk创建了一个 Firefox 插件。我正在尝试使用画布 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 之类的函数时，不会发生此错误。

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

我发现我可以使用this在我的插件中添加 chrome 权限，但是接下来我会做什么来使用 ctx.drawWindow？

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

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

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

4

1 回答 1

8

tab-browser这是从SDK的旧模块借用的代码片段。这将为您提供当前选项卡的缩略图，而无需附加到选项卡本身。

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，如果您不想要，只需忽略缩放部分。

于 2013-07-30T20:28:01.097 回答