5

addon sdkを使用してFirefoxアドオンを作成しました。私はcanvas drawWindow機能を使用しようとしています。addon sdkを使用して作成されたアドオンでcanvas drawWindow関数を使用するにはどうすればよいですか?

私はcanvas.getContext("2d")で得たキャンバスのコンテキストをctxといいます。

TypeError: ctx.drawWindow is not a function 

私はのような関数を呼び出すときに、このエラーは発生しません:私はこのコードを実行すると、

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

を使用して接続されているスクリプト内で、私は次のエラーを取得する

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

同じctxオブジェクトのstrokeRectとfillRect

this pageのドキュメントには、コードを使用するためにchrome特権が必要なため、問題がある可能性があります。私は、関数のためにcodeに基づいて、別のエラーが予想されます。

thisを使用してアドオンでchrome特権を取得できることがわかりましたが、次にctx.drawWindowを使用するにはどうすればよいですか?

this questionでコードを実行したとき、「エラー:操作が安全ではありません」ではなく、ページ上のスクラッチパッドからアドオンではなく、同じ「例外:ctx.drawWindow is機能ではありません "。

基本的に私が求めているのは、addon SDKを使用して作成されたアドオンにcanvas drawWindowを使用する方法ですか?

編集:レンダリングされたページの個々のピクセルにアクセスする方法が必要なので、これを実行しようとしています。キャンバスにページを描画してから、getImageDataを使ってピクセルにアクセスしたいと考えています。個々のピクセルにアクセスする他の方法(Firefoxアドオン内)がある場合は、それも参考になります。

答えて

8

SDKの古いtab-browserモジュールから借りたコードスニペットです。これにより、タブ自体にアタッチすることなく、現在のタブのサムネイルが表示されます。

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を介してデータを取得し、あなたがそれをしたくない場合は、単にスケーリング部分を無視することができるはずです。

+0

ただ一つの簡単な質問ですが、この行の 'thumbnail.mozOpaque = true;'は何ですか? – Neil

+0

sdk 1.17でこれを行う方法? – abhilash

+0

を新しいモジュールの場所で更新し、最後にconsole.logを追加しました。 –

関連する問題