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

投稿日:2016/03/03 / 更新日:2016/03/03

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に変換されます。

RUN
HTML
CSS
JavaScript

<div id="parent"> <div><canvas id="target"></canvas></div> <div><img id="output" src=""></div> </div> <p><a id="method1">描画</a></p> <p><a id="method2">toDataURI()</a></p> <p><a id="method3">toDataURI( "image/jpeg" )</a></p> <p><a id="method4">toDataURI( "image/webp" )</a></p> <p><a id="method5">リセット</a></p>

#parent { border: 1px solid #333 ; padding: 18px 0 ; overflow: hidden ; } #parent div { width: 50% ; float: left ; } #target , #output { width: 100px ; height: 100px ; background: #f2f2f2 ; display: block ; margin: 0 auto ; border: 0 ; } a { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-weight: 700 ; } a:hover { cursor: pointer ; background: #e6e6e6 ; } html{ font:400 14px / 1.618 ArialMT,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","メイリオ","ＭＳＰゴシック","Osaka" ; } code { background: #f2f2f2 ; }

// キャンパス要素を取得 var canvas = document.getElementById( "target" ) ; // 二次元グラフィックスのコンテキストを取得 var context = canvas.getContext( "2d" ) ; // img要素を取得 var image = document.getElementById( "output" ) ; // クリックイベント1 document.getElementById( "method1" ).addEventListener( "click", function() { // キャンパスの描画領域を指定する canvas.width = 100 ; canvas.height = 100 ; // 矩型を作成する context.rect( 0, 0, 50, 50 ) ; context.rect( 50, 50, 30, 30 ) ; context.rect( 80, 80, 20, 20 ) ; // 塗りつぶしの色を指定する context.fillStyle = "#D36015" ; // 塗りつぶす context.fill() ; } ) ; // クリックイベント2 document.getElementById( "method2" ).addEventListener( "click", function() { // 描画内容をデータURIに変換する (引数なしだとPNG) var dataURI = canvas.toDataURL() ; // img要素のsrc属性に指定 image.src = dataURI ; } ) ; // クリックイベント3 document.getElementById( "method3" ).addEventListener( "click", function() { // JPGにする場合 (第2引数は品質) var dataURI = canvas.toDataURL( "image/jpeg", 0.75 ) ; // img要素のsrc属性に指定 image.src = dataURI ; } ) ; // クリックイベント4 document.getElementById( "method4" ).addEventListener( "click", function() { // WEBPにする場合 var dataURI = canvas.toDataURL( "image/webp" ) ; // img要素のsrc属性に指定 image.src = dataURI ; } ) ; // リセット document.getElementById( "method5" ).addEventListener( "click", function() { // 二次元グラフィックスのコンテキストを取得 var context = canvas.getContext( "2d" ) ; // キャンパスをクリアーする context.clearRect( 0, 0, 200, 200 ) ; // img要素をクリアーする image.src = "" ; } ) ;

構文

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

引数

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

戻り値

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

ノート

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