Code snippets:Canvas

出典: MDC

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