Question

我正在使用Pale Moon Addon SDK编写扩展程序，它基本上与Firefox的Addon SDK完全相同。我正在尝试编写一个扩展，当用户在社交网络deviantArt上有新消息时会通知用户，但我遇到了问题。我希望更改扩展图标以显示用户拥有的消息数，因此我创建了一个空文档，如下所示：

var {window: {document}} = require('sdk/addon/window');

然后我拿起那个文件并添加一个像这样的HTML5画布：

var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");

到目前为止一直很好，但当我尝试将图像添加到该画布时，问题就出现了。它说Image没有定义。

if (is_core) {
    img = new Image();
    img.onload = function() {
        image = ctx.drawImage(img, 6, 30, 32, 32);
    }
    img.src = self.data.url("h_core-status.png");

问题当然是我已经加载了包含我需要创建的Image对象的任何模块，以便将其添加到画布中。但是，我需要该画布动态生成扩展的图标。我考虑过在文档中添加隐藏的iframe并在那里编辑画布，但这似乎是一个肮脏的解决方案。

是否有任何Firefox Addon SDK模块包含像我可以使用的Image这样的对象，有没有更好的方法来完成我想要完成的事情，或者我是否会犯这个错误？

Answer 1

我自己解决了这个问题，我发现JavaScript的new Image()只是创建了一个img标签，我们然后在画布中使用img标签将src设置为加载和加载。因此，通过明确而不是使用new Image()来执行此操作，我们可以避免未定义Image对象的问题。

只需替换：

img = new Image();

与

img = document.createElementNS("http://www.w3.org/1999/xhtml", "img");
document.documentElement.appendChild(img);

单独保留其余代码，它将起作用。

在Firefox Addon SDK中加载画布的图像

1 个答案: