在Firefox Addon SDK中加載畫布圖像

我正在使用Pale Moon Addon SDK編寫擴展程序，它基本上與Firefox的Addon SDK完全相同。我正試圖編寫一個擴展，通知用戶他們在社交網絡deviantArt上有新消息時，但我遇到了問題。我想擴展的圖標更改爲用戶展示具有消息的數量，所以我創建了一個空文件是這樣的：在Firefox Addon SDK中加載畫布圖像

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

然後我拿那個文件，並添加到它的HTML5的畫布，如下所示：

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

到目前爲止這麼好，但是當我嘗試將圖像添加到該畫布時，問題就出現了。它說圖像沒有被定義。

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");

問題，當然，是我沒有帶裝載了包括圖像對象我需要以將其添加到畫布創建任何模塊。但是，我需要該畫布動態生成擴展的圖標。我考慮在文檔中添加一個隱藏的iframe並在那裏編輯畫布，但它看起來像一個骯髒的解決方案。

是否有任何Firefox Addon SDK模塊包含像我可以使用的對象，有沒有更好的方法來做我想要完成的事情，還是我對這一切都有錯？

來源

2016-03-01 tomysshadow

我自己解決了這個問題，我認識到，JavaScript的new Image()只是創建一個img標籤，然後我們將src設置爲當它加載時，在畫布中使用該img標籤。因此，通過明確地執行此操作，而不是使用new Image()，我們可以避免未定義Image對象的問題。

只需更換：

img = new Image();

與

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

獨自離開代碼的其餘部分，它會工作。

來源

2016-03-02 00:15:00 tomysshadow

在Firefox Addon SDK中加載畫布圖像

回答

相關問題