如何在使用addon sdk创建的插件中使用canvas 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等函数时,不会发生此错误.

此页面上的文档说您需要chrome权限才能使用代码,因此可能会出现问题.基于函数的代码,我希望会出现不同的错误.

我发现我可以在使用我的插件铬特权这个,但我会怎么做未来使用ctx.drawWindow？

另外,当我在这个问题中运行代码时,从页面上的暂存器而不是插件,而不是"错误:操作是不安全的",我得到相同的"例外:ctx.drawWindow不是一个函数".

所以,基本上我要问的是,如何使用addon sdk创建的插件中使用canvas drawWindow？

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

Answer 1

这是一个代码片段,借用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,如果你不想这样,就忽略缩放部分.