如何在使用插件 sdk 创建的插件中使用画布 drawWindow 功能? [英] How do I use the canvas drawWindow function in an addon created using the addon sdk?

问题描述

我已经使用 插件 sdk<创建了一个 Firefox 插件/a>.我正在尝试使用 canvas drawWindow 功能.

我有以下代码来使用该函数，其中 ctx 指的是我通过 canvas.getContext("2d") 获得的画布上下文.

I've got the following code to use the function, where ctx refers to a canvas context, that I got with canvas.getContext("2d").

ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");

当我运行此代码时，在使用

When I run this code, within a script that is attached using

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 error does not occur when I call functions like strokeRect and fillRect on the same ctx object.

此页面上的文档说你需要 chrome 权限才能使用代码，所以这可能是个问题.我希望根据 代码 为函数.

The docs on this page says you need chrome privileges to use the code, so that may be issue. I would expect a different error, based on the code for the function.

我发现我可以使用 这个，但是接下来我该怎么做才能使用 ctx.drawWindow?

I found out that I can chrome privileges in my addon using this, but what would I do next to use ctx.drawWindow?

此外，当我在这个问题中运行代码时，来自页面上的暂存器，而不是来自插件，而不是错误:操作不安全"，我得到相同的异常:ctx.drawWindow 不是函数".

Also, when I ran the code in this question, from a scratchpad on a page, rather than from an addon, rather than a "Error: The operation is insecure", I get the same "Exception: ctx.drawWindow is not a function".

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

So, basically what I'm asking is, how would I go about use canvas drawWindow in addon created using the addon sdk?

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

I'm trying to do this because I need a method to access individual pixels of the rendered page. I'm hoping to draw the page to canvas, then access the pixel using getImageData. If there are other methods of doing accessing individual pixels (in an Firefox addon), that would be helpful too.

推荐答案

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

Here's a code snippet, borrowed from the old tab-browser module of the SDK. This will get you a thumbnail of the current tab without attaching to the tab itself.

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 获取数据，如果您不想要，可以忽略缩放部分.

From here you should be able to grab the data via getImageData and just ignore the scaling parts if you don't want that.

这篇关于如何在使用插件 sdk 创建的插件中使用画布 drawWindow 功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！