Canvas.toDataURL() - キャンパスをデータURIに変換する

投稿日: / 更新日:

JavaScriptの、CanvasオブジェクトのtoDataURL()は、キャンパスに描画されている現在の内容をPNGやJPG、webpのデータURIで取得するメソッドです。データURIはimg要素のsrc属性に指定できたり画像として保存もできます。例えば、「canvasを通したお絵描きの内容をPNG画像で保存できる」などの機能は、主にこのメソッドを利用して実装されます。

サンプルコード

<canvas id="target"></canvas>
<img id="output" src="">
// キャンパス要素を取得 (既に描画されている)
var canvas = document.getElementById( "target" ) ;

// 描画内容をデータURIに変換する (引数なしだとPNG)
var dataURI = canvas.toDataURL() ;

// JPGにする場合 (第2引数は品質)
var dataURI = canvas.toDataURL( "image/jpeg", 0.75 ) ;

// WEBPにする場合 (Chrome以外は非対応なのでPNGになる)
var dataURI = canvas.toDataURL( "image/webp", 0.75 ) ;

// img要素を取得
var image = document.getElementById( "output" ) ;

// データURIは直接img要素のsrc属性に指定できる
image.src = dataURI ;

デモ

「描画」のボタンを押すと、左側のキャンパスに適当な図形を描画します。次に「toDataURI()」のボタンを押すと、キャンパスの内容をデータURIに変換して、右側のimg要素のsrc属性に指定します。表示された画像はブラウザで保存することができます。JPEG、webpは仕様上、透過部分が黒くなります。webpはChrome以外ではサポートされていないため、デフォルトのPNGに変換されます。

構文

dataURI = canvas.toDataURI( mimetype [, quality ] ) ;

引数

項目説明
mimetype省略可。変換するデータURIの、画像のMIME Typeを指定する。省略した場合はPNGになる。JPEGの場合はimage/jpeg、WEBPの場合はimage/webp。WEBPはChrome以外でサポートされていない。
quality省略可。JPEG、WEBPの場合は品質を01の間で指定できる。

戻り値

項目説明
dataURI変換されたデータURIが戻り値となる。

ノート

サポート状況
主要な全てのブラウザがサポートしている。Ie8以下はcanvas自体に対応していない。
PNG、JPEG、WEBPをサポート
主に対応している画像の種類はPNG、JPEG、WEBPの3種類。toDataURI()は、第2引数以降でデータURIにエンコーディングする細かい仕様を指定できる内容になってはいるが、2016年現在は、主に前述の三種類に落ち着いているようだ。
外部コンテンツは変換不可
画像やフォントなど、外部サーバーにあるコンテンツを利用して描画された内容は、Same Origin Policyに違反するため、データURIに変換できない。コンテンツの提供元サーバーがAccess-Control-Allow-Originを許可している必要がある。