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

问题描述

我使用 addon sdk 创建了一个Firefox插件。 a>。我尝试使用 canvas drawWindow 函数。

I've create a Firefox addon using the addon sdk. I'm trying to use the canvas drawWindow function.

我有以下代码来使用函数，其中ctx指的是一个canvas上下文，我用 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".

所以，基本上我要问的是，我将如何使用canvas drawWindow在使用addon sdk创建的addon中？

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

修改：我想要这样做，因为我需要一种方法来访问渲染页面的各个像素。我希望将页面绘制到画布上，然后使用 getImageData 。

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.

推荐答案

这里有一个用于访问单个像素的方法（在Firefox插件中）代码片段，借鉴了SDK的旧标签浏览器模块。这将获取当前标签的缩略图，而不附加到标签本身。

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.

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