Wie verwende ich die canvas drawWindow-Funktion in einem Addon, das mit dem Addon SDK erstellt wurde?

Question

Ich habe ein Firefox-Addon mit der addon sdk erstellt. Ich versuche die canvas drawWindow Funktion zu verwenden.

Ich habe den folgenden Code, um die Funktion zu verwenden, wobei sich ctx auf einen Canvas-Kontext bezieht, den ich mit canvas.getContext("2d") bekommen habe.

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

Wenn ich diesen Code ausführen, in einem Skript, das verbunden ist mit

tabs.activeTab.attach({ 
    contentScriptFile: data.url("app.js") // app.js contains the above line of code 
}); 

ich die folgende Fehlermeldung erhalten:

TypeError: ctx.drawWindow is not a function 

Dieser Fehler tritt nicht auf, wenn ich Funktionen aufrufen wie strokeRect und fillRect für dasselbe ctx-Objekt.

Die Dokumentation auf this page sagt, dass Sie Chrome-Berechtigungen benötigen, um den Code zu verwenden, so dass möglicherweise Problem sein. Ich würde einen anderen Fehler erwarten, basierend auf der code für die Funktion.

Ich fand heraus, dass ich Privilegien in meinem Addon mit this chremen kann, aber was würde ich tun, um ctx.drawWindow zu verwenden?

Auch, wenn ich den Code in this question lief, von einem Notizblock auf einer Seite, anstatt von einem Addon, anstatt ein "Fehler: Die Operation ist unsicher", bekomme ich die gleiche "Ausnahme: ctx.drawWindow ist keine Funktion ".

Also, im Grunde, was ich frage ist, wie würde ich gehen über die Verwendung von Canvas DrawWindow in Addon erstellt mit dem Addon SDK?

Bearbeiten: Ich versuche, dies zu tun, weil ich eine Methode für den Zugriff auf einzelne Pixel der gerenderten Seite benötigen. Ich hoffe, die Seite auf die Leinwand zu zeichnen, dann auf das Pixel unter Verwendung getImageData zuzugreifen. Wenn es andere Methoden gibt, auf einzelne Pixel zuzugreifen (in einem Firefox-Addon), wäre das auch hilfreich.

Answer 1

Hier ist ein Code-Snippet, ausgeliehen von dem alten tab-browser-Modul des SDK. Dadurch erhalten Sie ein Thumbnail des aktuellen Tabs ohne an den Tab selbst anzuhängen.

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

Von hier aus sollten Sie in der Lage sein, die Daten über getImageData zu greifen und nur die Skalierungs Teile ignorieren, wenn Sie das nicht wollen.