initial commit

1 files changed, 268 insertions, 0 deletions

diff --git a/files/ja/web/api/htmlcanvaselement/toblob/index.html b/files/ja/web/api/htmlcanvaselement/toblob/index.html
new file mode 100644
index 0000000000..7b87c9e261
--- /dev/null
+++ b/files/ja/web/api/htmlcanvaselement/toblob/index.html
@@ -0,0 +1,268 @@
+---
+title: HTMLCanvasElement.toBlob()
+slug: Web/API/HTMLCanvasElement/toBlob
+tags:
+  - API
+  - Canvas
+  - HTMLCanvasElement
+  - Method
+  - Reference
+translation_of: Web/API/HTMLCanvasElement/toBlob
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p><strong><code>HTMLCanvasElement.toBlob()</code></strong> メソッドは、 キャンバスに含まれる画像を表す {{domxref("Blob")}} オブジェクトを生成します；このファイルは、ユーザーエージェントの裁量によって、ディスクにキャッシュされるか、メモリに保存されます。<code>type</code> が指定されてない場合、画像の type は、 <code>image/png</code> です。生成された画像の解像度は、96dpi です。<br>
+ <code>image/jpeg</code> 画像と一緒に使用される 3 つ目の引数は、出力の品質を指定します。</p>
+
+<h2 id="構文">構文</h2>
+
+<pre class="syntaxbox"><var>void <em>canvas</em>.toBlob(<em>callback</em>, <em>mimeType</em>, <em>qualityArgument</em>);</var>
+</pre>
+
+<h3 id="パラメーター">パラメーター</h3>
+
+<dl>
+ <dt>callback</dt>
+ <dd>引数として {{domxref("Blob")}} オブジェクトを受け取るコールバック関数。</dd>
+ <dt><code>mimeType</code> {{optional_inline}}</dt>
+ <dd>画像フォーマットを示す {{domxref("DOMString")}}。既定の型は <code>image/png</code>。</dd>
+ <dt><code>qualityArgument</code> {{optional_inline}}</dt>
+ <dd>要求した type が <code>image/jpeg </code> か <code>image/webp</code> だった場合、画像の品質を示す <code>0</code> から <code>1</code> の {{jsxref("Number")}}。type 引数がそのほかの値だった場合、既定の値が画質に使用される。ほかの引数は無視される。</dd>
+</dl>
+
+<h3 id="戻り値">戻り値</h3>
+
+<p>なし。</p>
+
+<h2 id="例">例</h2>
+
+<h3 id="キャンバスに表示されている画像を取得する">キャンバスに表示されている画像を取得する</h3>
+
+<p>一度キャンバスにコンテンツを描画したら、これを何らかのサポートされている画像フォーマットに変換できます。たとえば、下記のコードスニペットは、ID が "canvas" の {{HTMLElement("canvas")}} 要素を取得して、PNG 画像としてコピーしてから、ドキュメントに新しい {{HTMLElement("img")}} 要素を追加しています。この画像ソースはキャンバスを使用して生成されたものです。</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+
+canvas.toBlob(function(blob) {
+  var newImg = document.createElement("img"),
+      url = URL.createObjectURL(blob);
+
+  newImg.onload = function() {
+    // 無効化されたため、もはや blob を読み取る必要はありません。
+    URL.revokeObjectURL(url);
+  };
+
+  newImg.src = url;
+  document.body.appendChild(newImg);
+});
+</pre>
+
+<p>ここでは、PNG 画像を生成していることに注意してください；<code>toBlob()</code> の呼び出しに 2 つ目のパラメーターを追加した場合、画像の種類を指定できます。たとえば、 JPEG フォーマットの画像を取得できます：</p>
+
+<pre class="brush: js"> canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality</pre>
+
+<div>
+<h3 id="キャンバスをアイコンに変換する方法（Mozilla_のみ）">キャンバスをアイコンに変換する方法（Mozilla のみ）</h3>
+
+<p>キャンバスをアイコンに変換するには、<code>-moz-parse</code> を使用します。Windows XP は PNG から ico への変換をサポートしていませんが、代わりに bmp を使用できます。download 属性を設定することで、ダウンロードリンクを生成できます。download 属性の値は、ファイル名として使用される名前です。</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var d = canvas.width;
+ctx = canvas.getContext("2d");
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = "yellow";
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var a = document.createElement("a");
+    a.textContent = "Download";
+    document.body.appendChild(a);
+    a.style.display = "block";
+    a.download = iconName + ".ico";
+    a.href = window.URL.createObjectURL(b);
+  }
+}
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');</pre>
+</div>
+
+<h3 id="OS.File（chromeadd-on_コンテクストのみ）で_toBlob_をディスクに保存する">OS.File（chrome/add-on コンテクストのみ）で toBlob をディスクに保存する</h3>
+
+<div class="note">
+<p>このテクニックは画像をデスクトップに保存しますが、Web サイトには公開されていない OS API として Firefox chrome コンテクストか add-on コードでのみ役立ちます。</p>
+</div>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var d = canvas.width;
+ctx = canvas.getContext("2d");
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = "yellow";
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var r = new FileReader();
+    r.onloadend = function () {
+    // r.result contains the ArrayBuffer.
+    Cu.import('resource://gre/modules/osfile.jsm');
+    var writePath = OS.Path.join(OS.Constants.Path.desktopDir,
+                                 iconName + '.ico');
+    var promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result),
+                                      {tmpPath:writePath + '.tmp'});
+    promise.then(
+      function() {
+        console.log('successfully wrote file');
+      },
+      function() {
+        console.log('failure writing file')
+      }
+    );
+  };
+  r.readAsArrayBuffer(b);
+  }
+}
+
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');</pre>
+
+<h2 id="仕様">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>{{SpecName('HTML5 W3C')}} の最新のスナップショットから変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>初期定義を含む {{SpecName('HTML WHATWG')}} のスナップショット。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>機能</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基本サポート</td>
+   <td>{{CompatChrome("50")}}</td>
+   <td>{{CompatGeckoDesktop('19')}}</td>
+   <td>{{CompatIE(10)}}{{property_prefix("ms")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>画質パラメーター</td>
+   <td>{{CompatChrome("50")}}</td>
+   <td>{{CompatGeckoDesktop('25')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>機能</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>基本サポート</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("50")}}</td>
+   <td>{{CompatGeckoMobile("19")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome("50")}}</td>
+  </tr>
+  <tr>
+   <td>画質パラメーター</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("50")}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome("50")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] WebKit はまだこの機能を実装していません。{{WebKitBug("71270")}} を見てください。</p>
+
+<h2 id="ポリフィル">ポリフィル</h2>
+
+<p>toDataURL に基づいた低パフォーマンスのポリフィルです。</p>
+
+<pre class="brush: js">if (!HTMLCanvasElement.prototype.toBlob) {
+ Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+  value: function (callback, type, quality) {
+
+    var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
+        len = binStr.length,
+        arr = new Uint8Array(len);
+
+    for (var i=0; i&lt;len; i++ ) {
+     arr[i] = binStr.charCodeAt(i);
+    }
+
+    callback( new Blob( [arr], {type: type || 'image/png'} ) );
+  }
+ });
+}
+</pre>
+
+<h2 id="関連項目">関連項目</h2>
+
+<ul>
+ <li>これが定義されているインターフェース： {{domxref("HTMLCanvasElement")}}</li>
+ <li>{{domxref("Blob")}}</li>
+</ul>