<canvas>
を利用するための一般的な情報については、チュートリアル を参照してください。
canvas のイメージをファイルに保存する
以下の関数は canvas オブジェクトと保存先ファイルパス文字列を受け取ります。canvas は PNG ファイルに変換され、指定された場所に保存されます。関数はダウンロード状況ダイアログを表示しますが、ダイアログは除去可能です。
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; // ダウンロードダイアログを表示します (表示しないようにするためには 3 行を消してください) var xfer = Components.classes["@mozilla.org/transfer;1"] .createInstance(Components.interfaces.nsITransfer); xfer.init(source, target, "", null, null, null, persist); persist.progressListener = xfer; // canvas データをファイルに保存します persist.saveURI(source, null, null, null, null, file); }