Canvas

  • リビジョンの URL スラッグ: Code_snippets/Canvas
  • リビジョンのタイトル: Canvas
  • リビジョンの ID: 173250
  • 作成日:
  • 作成者: Mgjbot
  • 現行リビジョン いいえ
  • コメント robot Adding: [[en:Code snippets:Canvas]] <<langbot>>

このリビジョンの内容

<canvas> を利用するための一般的な情報については、チュートリアル を参照してください。

{{wiki.template('英語版章題', [ "Saving a canvas image to a file" ])}}

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);
}
{{ wiki.languages( { "en": "en/Code_snippets/Canvas", "fr": "fr/Extraits_de_code/Relatif_\u00e0_canvas", "pl": "pl/Fragmenty_kodu/Canvas" } ) }}

このリビジョンのソースコード

<p>
<code>&lt;canvas&gt;</code> を利用するための一般的な情報については、<a href="ja/Canvas_tutorial">チュートリアル</a> を参照してください。
</p><p>{{wiki.template('英語版章題', [ "Saving a canvas image to a file" ])}}
</p>
<h3 name="canvas_.E3.81.AE.E3.82.A4.E3.83.A1.E3.83.BC.E3.82.B8.E3.82.92.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.AB.E4.BF.9D.E5.AD.98.E3.81.99.E3.82.8B">canvas のイメージをファイルに保存する</h3>
<p>以下の関数は canvas オブジェクトと保存先ファイルパス文字列を受け取ります。canvas は PNG ファイルに変換され、指定された場所に保存されます。関数はダウンロード状況ダイアログを表示しますが、ダイアログは除去可能です。
</p>
<pre>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);
}
</pre>
<div class="noinclude">
</div>
{{ wiki.languages( { "en": "en/Code_snippets/Canvas", "fr": "fr/Extraits_de_code/Relatif_\u00e0_canvas", "pl": "pl/Fragmenty_kodu/Canvas" } ) }}
Revert to this revision