[JavaScript][Firefox] ブラウザのスクリーンショットを撮る

今回はFirefox上で表示しているWebページのスクリーンショットを作成し、
PNGファイルとして保存する方法を紹介します。
この操作は、Firefoxの拡張機能で作成しなければなりません。

ちなみに、拡張機能の作り方についてはここではふれません。

スクリーンショットの取得する方法は非常に簡単です。
canvasオブジェクトを使います。
まず、htmlオブジェクトとしてcanvasオブジェクトを作成します。
　var canvas = window._content.document.createElement("canvas");
この作成したcanvasに大きさを与えます。
canvas.setAttribute("height", window._content.document.height);
canvas.setAttribute("width", window._content.document.width);
次に、コンテキストを取得します。
var ctx = canvas.getContext("2d");
あとは、スクリーンデータをこのコンテキストに塗るだけです。
ctx.drawWindow(window._content, 0, 0, width, height, "rgb(0,0,0)");
これで、キャプチャ完了です。簡単でしょ？？？
PNGファイルとして保存する場合、canvasからデータを抜き取って書き出すだけです。
メインはcanvasでWebページのスクリーンショットを取得することなので、
コンポーネントの使い方とか、ファイルアクセスについては割愛します。
下に示すのが、保存するソースコードになります。

注意：関数saveCanvasのdestFile要素は保存するディレクトリまでのパスになります。
Windows環境についてコメントすると、パスはC:\で表現されるパスです。

function saveCanvas(canvas, destFile) {

// ファイルパス文字列を nsIFile に変換する
var file = Components.classes["@mozilla.org/file/local;1"]
.createInstance(Components.interfaces.nsILocalFile);
file.initWithPath(destFile);

// canvas からデータ URL 形式を作成し、ソースとターゲットの URI を作成します
var io = Components.classes["@mozilla.org/network/io-service;1"]
.getService(Components.interfaces.nsIIOService);
var source = io.newURI(canvas.toDataURL("image/png", ""), "UTF8", null);
var target = io.newFileURI(file)

// canvas データを保存する準備をします
var persist = Components.classes["@mozilla.org/embedding/browser/nsWebBrowserPersist;1"]
.createInstance(Components.interfaces.nsIWebBrowserPersist);

persist.persistFlags = Components.interfaces.nsIWebBrowserPersist.PERSIST_FLAGS_REPLACE_EXISTING_FILES;
persist.persistFlags |= Components.interfaces.nsIWebBrowserPersist.PERSIST_FLAGS_AUTODETECT_APPLY_CONVERSION;

// canvas データをファイルに保存します
persist.saveURI(source, null, null, null, null, file);
}

これで、保存されたファイルをビューアで表示すればスクリーンショットが保存できていることが分かります。