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不是一个函数“。

所以，基本上我要问的是，如何在使用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获取数据，如果您不想要，则忽略缩放部分。

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

1 个答案: