diff options
Diffstat (limited to 'files/ja/web/api/htmlcanvaselement')
| -rw-r--r-- | files/ja/web/api/htmlcanvaselement/capturestream/index.html | 132 | ||||
| -rw-r--r-- | files/ja/web/api/htmlcanvaselement/index.html | 250 | ||||
| -rw-r--r-- | files/ja/web/api/htmlcanvaselement/toblob/index.html | 268 | ||||
| -rw-r--r-- | files/ja/web/api/htmlcanvaselement/todataurl/index.html | 155 |
4 files changed, 805 insertions, 0 deletions
diff --git a/files/ja/web/api/htmlcanvaselement/capturestream/index.html b/files/ja/web/api/htmlcanvaselement/capturestream/index.html new file mode 100644 index 0000000000..16b2e9492a --- /dev/null +++ b/files/ja/web/api/htmlcanvaselement/capturestream/index.html @@ -0,0 +1,132 @@ +--- +title: HTMLCanvasElement.captureStream() +slug: Web/API/HTMLCanvasElement/captureStream +tags: + - Canvas + - Experimental + - HTMLCanvasElement + - Interface + - Media + - Media Capture DOM Elements + - Method + - Reference + - Web +translation_of: Web/API/HTMLCanvasElement/captureStream +--- +<div>{{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}</div> + +<p><code><strong>HTMLCanvasElement</strong></code><strong><code>.captureStream()</code></strong> メソッドは、canvas の前面をリアルタイムにキャプチャした動画を {{domxref("CanvasCaptureMediaStream")}} として返すメソッドです。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox"><var>MediaStream</var> = <var>canvas</var>.captureStream(<var>frameRate</var>); +</pre> + +<h3 id="引数">引数</h3> + +<dl> + <dt><code>frameRate</code> {{optional_inline}}</dt> + <dd>キャプチャする際のフレームレートを倍精度浮動小数点数で指定します。指定しなかった場合、canvas が変化するたびにフレームが新しくキャプチャされます。0 を指定した場合、フレームが 1 枚だけキャプチャされます。</dd> +</dl> + +<h3 id="戻り値">戻り値</h3> + +<p>{{domxref("MediaStream")}} オブジェクトへの参照を返します。</p> + +<h2 id="使用例">使用例</h2> + +<pre class="brush: js">// キャプチャしたい canvas 要素を取得 +var canvasElt = document.querySelector('canvas'); + +// ストリームの取得 +var stream = canvasElt.captureStream(25); // 25 FPS + +// 取得したストリームに対して何らかの処理を行う +// 例：RTCPeerConnection を使って別のコンピュータに送信 +// ここで pc は既に生成された RTCPeerConnection オブジェクト +pc.addStream(stream); +</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Media Capture DOM Elements', '#widl-HTMLCanvasElement-captureStream-CanvasCaptureMediaStream-double-frameRate', 'HTMLCanvasElement.captureStream()')}}</td> + <td>{{Spec2('Media Capture DOM Elements')}}</td> + <td>初期定義</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(51.0)}}</td> + <td>{{CompatGeckoDesktop(43)}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(36.0)}}</td> + <td>{{CompatUnknown}}</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>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(51.0)}}</td> + <td>{{CompatChrome(51.0)}}</td> + <td>{{CompatGeckoMobile(43)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(38)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Firefox 41 / 42 では機能がデフォルトで無効となっています。 有効にする場合<code>は canvas.capturestream.enabled</code> の設定項目を <code>true</code> に変更してください。</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{domxref("CanvasCaptureMediaStream")}} - 戻り値のインターフェイス</li> + <li>{{domxref("HTMLMediaElement.captureStream()")}} - media 要素からストリームをキャプチャするメソッド</li> + <li>{{domxref("MediaStream")}}</li> + <li>{{domxref("Media Capture and Streams API")}}</li> +</ul> diff --git a/files/ja/web/api/htmlcanvaselement/index.html b/files/ja/web/api/htmlcanvaselement/index.html new file mode 100644 index 0000000000..dbb7b8508a --- /dev/null +++ b/files/ja/web/api/htmlcanvaselement/index.html @@ -0,0 +1,250 @@ +--- +title: HTMLCanvasElement +slug: Web/API/HTMLCanvasElement +tags: + - API + - Canvas + - HTML DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLCanvasElement +--- +<div> +<div>{{APIRef("Canvas API")}}</div> +</div> + +<p><strong><code>HTMLCanvasElement</code></strong>インタフェースはcanvas要素のレイアウトや表現の操作のための属性やメソッドを提供します。<code>HTMLCanvasElement</code>は{{domxref("HTMLElement")}}インタフェースのプロパティやメソッドも利用可能です。</p> + +<h2 id="属性">属性</h2> + +<p><em>{{domxref("HTMLElement")}}から継承する属性の他に以下の属性を持ちます。</em></p> + +<dl> + <dt>{{domxref("HTMLCanvasElement.height")}}</dt> + <dd>正の<code>integer</code> で {{htmlattrxref("height", "canvas")}} というHTMLの{{HTMLElement("canvas")}}要素の属性で指定されたCSSピクセルの値です。もしこの属性が指定されていないか、無効な値であるならば、デフォルト値として<code>150</code>を用います。</dd> + <dt>{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}</dt> + <dd>{{jsxref("Boolean")}}で{{htmlattrxref("moz-opaque", "canvas")}}という{{HTMLElement("canvas")}}要素で指定されたものを反映したものです。この属性はcanvasが半透明であることが重要か否かを指定します。もし半透明がないならば、描画を最適化できます。</dd> + <dt>{{domxref("HTMLCanvasElement.width")}}</dt> + <dd>正の<code>integer</code> で{{htmlattrxref("width", "canvas")}} というHTMLの{{HTMLElement("canvas")}}要素の属性で指定されたCSSピクセルの値です。もしこの属性が指定されていないか、無効な値であるならば、デフォルト値として<code>300</code>を用います。</dd> +</dl> + +<h2 id="メソッド">メソッド</h2> + +<p><em>{{domxref("HTMLElement")}}から継承するメソッドの他に以下のメソッドを持ちます。</em></p> + +<dl> + <dt>{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}</dt> + <dd>Returns a {{domxref("CanvasCaptureMediaStream")}} that is a real-time video capture of the surface of the canvas.</dd> + <dt>{{domxref("HTMLCanvasElement.getContext()")}}</dt> + <dd> + <p>Canvasの描画コンテキストを返すか、サポートされていないコンテキストIDの場合nullを返します。<br> + 描画コンテキストを用いてCanvasに描画することができます。<br> + getContextの引数に<code>"2d"</code>を渡すと{{domxref("CanvasRenderingContext2D")}} オブジェクトを、<code>"experimental-webgl"</code>(または<code>"webgl"</code>)を渡すと {{domxref("WebGLRenderingContext")}}オブジェクトを返します。<br> + <code>"experimental-webgl"</code>または<code>"webgl"</code>コンテキストは、ブラウザがWebGLに対応している場合に限り使用できます。</p> + </dd> + <dt>{{domxref("HTMLCanvasElement.toDataURL()")}}</dt> + <dd>Returns a data-URL containing a representation of the image in the format specified by the <code>type</code> parameter (defaults to <code>png</code>). The returned image is in a resolution of 96dpi.</dd> + <dt>{{domxref("HTMLCanvasElement.toBlob()")}}</dt> + <dd>Creates a {{domxref("Blob")}} object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.</dd> + <dt>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}</dt> + <dd>Transfers control to an {{domxref("OffscreenCanvas")}} object, either on the main thread or on a worker.</dd> + <dt>{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Returns a {{domxref("File")}} object representing the image contained in the canvas; this file is a memory-based file, with the specified <code>name</code>. If <code>type</code> is not specified, the image type is <code>image/png</code>.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}</td> + <td>{{Spec2('Media Capture DOM Elements')}}</td> + <td>Adds the method <code>captureStream()</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>The method <code>getContext()</code> now returns a {{domxref("RenderingContext")}} rather than an opaque <code>object</code>.<br> + The methods <code>probablySupportsContext()</code>, <code>setContext()</code> and <code>transferControlToProxy()</code>have been added.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support (<code>2D</code> context)</td> + <td>4.0</td> + <td>{{CompatGeckoDesktop('1.9.2')}}</td> + <td>9.0</td> + <td>9.0 [1]</td> + <td>3.1</td> + </tr> + <tr> + <td><code>toBlob()</code></td> + <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td> + <td>{{CompatGeckoDesktop('19')}} [2]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td> + </tr> + <tr> + <td><code>probablySupportsContext()</code>,<br> + <code>setContext()</code>,<br> + <code>transferControlToProxy()</code> {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop('2')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>captureStream()</code> {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop('41')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(44)}} [3]</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>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support (<code>2D</code> context)</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>10.0 [1]</td> + <td>3.2</td> + </tr> + <tr> + <td><code>webgl</code> context</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} as <code>experimental-webgl</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>toBlob()</code></td> + <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td> + <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td> + <td>{{CompatGeckoMobile('18')}} [2]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td> + </tr> + <tr> + <td><code>probablySupportsContext()</code>,<br> + <code>setContext()</code>,<br> + <code>transferControlToProxy() </code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile('2')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>captureStream() </code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile('41')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(44)}} [3]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Opera Mini 5.0 and later has partial support.</p> + +<p>[2] Support for the third parameter, has been added in Gecko 25 only: when used with the <code>"image/jpeg"</code> type, this argument specifies the image quality.</p> + +<p>[3] This feature is behind a feature preference setting. In about:config, set <code>gfx.offscreencanvas.enabled</code> to <code>true</code>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>HTML element implementing this interface: {{HTMLElement("canvas")}}.</li> +</ul> 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<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> diff --git a/files/ja/web/api/htmlcanvaselement/todataurl/index.html b/files/ja/web/api/htmlcanvaselement/todataurl/index.html new file mode 100644 index 0000000000..f955a994a5 --- /dev/null +++ b/files/ja/web/api/htmlcanvaselement/todataurl/index.html @@ -0,0 +1,155 @@ +--- +title: HTMLCanvasElement.toDataURL() +slug: Web/API/HTMLCanvasElement/toDataURL +translation_of: Web/API/HTMLCanvasElement/toDataURL +--- +<div>{{APIRef("Canvas API")}}</div> + +<p><strong><code>HTMLCanvasElement.toDataURL()</code></strong> メソッドは、 <code>type</code> パラメータ（デフォルトは<a href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a>形式）で指定される画像フォーマット形式の <a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a> を返すメソッドです。返り値となる画像の解像度は96 dpiです。</p> + +<ul> + <li>キャンバスの幅か高さが、<code>0</code> もしくは <a href="/en-US/docs/Web/HTML/Element/canvas#Maximum_canvas_size">maximum canvas size</a> より大きい場合、文字列 <code>"data:,"</code>を返します。</li> + <li><code>image/png</code> 形式を指定したにもかかわらず返り値が <code>data:image/png</code> で始まる場合、要求された形式には対応していません。</li> + <li>Chrome は <code>image/webp</code> 形式に対応します。</li> +</ul> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate"><em>canvas</em>.toDataURL(<em>type</em>, <em>encoderOptions</em>); +</pre> + +<h3 id="パラメーター">パラメーター</h3> + +<dl> + <dt><code>type</code> {{optional_inline}}</dt> + <dd>画像フォーマットを示す {{domxref("DOMString")}} 。 指定しなかった場合、デフォルトのフォーマット形式は <code>image/png</code> です。</dd> + <dt><code>encoderOptions</code> {{optional_inline}}</dt> + <dd><code>0</code> から <code>1</code> の間の {{jsxref("Number")}} で示す、 <code>image/jpeg</code> や <code>image/webp</code> のような非可逆圧縮を使う画像フォーマットの画質です。<br> + この引数がその他の値だった場合、デフォルトの画質が使われます。デフォルト値は <code>0.92</code> です。その他の引数は無視されます。</dd> +</dl> + +<h3 id="戻り値">戻り値</h3> + +<p>要求された<a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a>を含む {{domxref("DOMString")}} 。</p> + +<h3 id="例外">例外</h3> + +<dl> + <dt><code>SecurityError</code></dt> + <dd>キャンバスのビットマップがorigin cleanではありません。少なくとも一部、ドキュメントがロードされたサイト以外のサイトからロードされた、またはロードされた可能性のあるコンテンツを含んでいます。（訳注：いわゆる「汚染されたキャンバス」の問題です。<a href="/ja/docs/Web/HTML/CORS_enabled_image">画像とキャンバスをオリジン間で利用できるようにする</a>もあわせて参照してください）</dd> +</dl> + +<h2 id="例">例</h2> + +<p>このような {{HTMLElement("canvas")}} 要素を用意します</p> + +<pre class="brush: html notranslate"><canvas id="canvas" width="5" height="5"></canvas> +</pre> + +<p>以下のコードによりキャンバスのData URLを取得できます。</p> + +<pre class="brush: js notranslate">var canvas = document.getElementById('canvas'); +var dataURL = canvas.toDataURL(); +console.log(dataURL); +// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby +// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC" +</pre> + +<h3 id="JPEGの画質を設定する">JPEGの画質を設定する</h3> + +<pre class="brush: js notranslate">var fullQuality = canvas.toDataURL('image/jpeg', 1.0); +// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z" +var mediumQuality = canvas.toDataURL('image/jpeg', 0.5); +var lowQuality = canvas.toDataURL('image/jpeg', 0.1); +</pre> + +<h3 id="Example_Dynamically_change_images">Example: Dynamically change images</h3> + +<p>You can use this technique in coordination with mouse events in order to dynamically change images (gray-scale vs. color in this example):</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><img class="grayscale" src="myPicture.png" alt="Description of my picture" /></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js;highlight:[33] notranslate">window.addEventListener('load', removeColors); + +function showColorImg() { + this.style.display = 'none'; + this.nextSibling.style.display = 'inline'; +} + +function showGrayImg() { + this.previousSibling.style.display = 'inline'; + this.style.display = 'none'; +} + +function removeColors() { + var aImages = document.getElementsByClassName('grayscale'), + nImgsLen = aImages.length, + oCanvas = document.createElement('canvas'), + oCtx = oCanvas.getContext('2d'); + for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) { + oColorImg = aImages[nImgId]; + nWidth = oColorImg.offsetWidth; + nHeight = oColorImg.offsetHeight; + oCanvas.width = nWidth; + oCanvas.height = nHeight; + oCtx.drawImage(oColorImg, 0, 0); + oImgData = oCtx.getImageData(0, 0, nWidth, nHeight); + aPix = oImgData.data; + nPixLen = aPix.length; + for (nPixel = 0; nPixel < nPixLen; nPixel += 4) { + aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3; + } + oCtx.putImageData(oImgData, 0, 0); + oGrayImg = new Image(); + oGrayImg.src = oCanvas.toDataURL(); + oGrayImg.onmouseover = showColorImg; + oColorImg.onmouseout = showGrayImg; + oCtx.clearRect(0, 0, nWidth, nHeight); + oColorImg.style.display = "none"; + oColorImg.parentNode.insertBefore(oGrayImg, oColorImg); + } +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.HTMLCanvasElement.toDataURL")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The interface defining it, {{domxref("HTMLCanvasElement")}}.</li> + <li><a href="/en-US/docs/Web/HTTP/data_URIs">Data URIs</a> in the <a href="/en-US/docs/Web/HTTP">HTTP</a> reference.</li> +</ul> |