Jak korzystać z funkcji draw_indow canvas w addonie utworzonym za pomocą dodatku sdk?

Question

Stworzyłem dodatek Firefox, używając addon sdk. Próbuję użyć funkcji canvas drawWindow.

Mam następujący kod do korzystania z funkcji, gdzie ctx odnosi się do kontekstu płótna, które mam z canvas.getContext("2d").

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

Kiedy uruchomić ten kod, w skrypcie, który jest przymocowany za pomocą

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

pojawia się następujący błąd:

TypeError: ctx.drawWindow is not a function 

Ten błąd nie występuje, kiedy wywoływać funkcje jak strokeRect i fillRect na tym samym obiekcie ctx.

Dokumenty na temat this page mówią, że do korzystania z kodu potrzebne są uprawnienia chrome, więc może to być problem. Spodziewałbym się innego błędu, opartego na funkcji code.

Dowiedziałem się, że mogę przywileje chrome w moim addon przy użyciu this, ale co mam zrobić, aby użyć ctx.drawWindow?

Również, gdy uruchomiłem kod w , ze scratchpada na stronie, a nie z addonu, zamiast "Błąd: operacja jest niepewna", otrzymuję to samo "Wyjątek: ctx.drawWindow jest nie jest funkcją ".

Tak więc, w zasadzie to o co pytam, to w jaki sposób mam użyć płótna drawwindow w addonie utworzonym za pomocą dodatku sdk?

Edytuj: Próbuję to zrobić, ponieważ potrzebuję metody dostępu do poszczególnych pikseli renderowanej strony. Mam nadzieję, że narysuję stronę na płótnie, a następnie uzyskam dostęp do piksela za pomocą getImageData. Jeśli są inne metody uzyskiwania dostępu do poszczególnych pikseli (w dodatku do Firefoksa), byłoby to pomocne.

Answer 1

Oto fragment kodu zapożyczony ze starego modułu SDK tab-browser. Spowoduje to wyświetlenie miniatury aktualnej karty bez dołączania do samej karty.

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

Stąd powinieneś być w stanie chwycić danych poprzez getImageData i po prostu zignorować części skalowania, jeśli nie chcemy.