構文

url = canvas . toDataURL( [ type, ... ])

canvas のイメージに対する data: URL を返します。

第 1 引数を指定すると、それは、返されるイメージのタイプ (例えば、PNG や JPEG) を制御します。デフォルトは image/png です。このタイプは、指定のタイプがサポートされていない場合も適用されます。残りの引数はタイプ固有のものとなり、下表の通り、イメージが生成される方法を制御することになります。

仕様

image/png 以外のタイプを使おうとするとき、本当にリクエストしたフォーマットでイメージが返ってくるのかをチェックすることができます。返ってきた値が、正確に "data:image/png," または "data:image/png;" に前方一致するかどうかを見るのです。もし一致しれいれば、そのイメージは PNG ということになります。つまり、この場合は、リクエストしたタイプはサポートされていないということになります。（これにはひとつだけ例外があります。もし canvas の幅または高さが 0 なら、ただ単に "data:," という結果になります。）

原文：http://www.w3.org/TR/2010/WD-html5-20100624/the-canvas-element.html#dom-canvas-todataurl

サンプル

サンプルでは、まず上図のとおり、canvas 上に赤色の矩形を描画しました。そして、toDataURL() を使って、canvas に描かれた状態を PNG フォーマットに変換したデータを取得し、img 要素の src 属性にセットしてみました。また、toDataURL() を使って得られたデータを div 要素内に表示しました。その後、toDataURL("image/jpeg") でも試しました。

/* canvasに赤色の矩形を描画する */
ctx.fillStyle = "rgb(200, 0, 0)";
ctx.fillRect(20, 30, 60, 40);
/* canvasの描画結果をPNGで取り出しimg要素にセット */
try {
  var img_png_src = canvas.toDataURL();
  document.getElementById("image_png").src = img_png_src;
  document.getElementById("data_url_png").firstChild.nodeValue = img_png_src;
} catch(e) {
  document.getElementById("image_png").alt = "未対応";
}
/* canvasの描画結果をJPEGで取り出しimg要素にセット */
try {
  var img_jpeg_src = canvas.toDataURL("image/jpeg");
  document.getElementById("image_jpeg").src = img_jpeg_src;
  document.getElementById("data_url_jpeg").firstChild.nodeValue = img_jpeg_src;
} catch(e) {
  document.getElementById("image_jpeg").alt = "未対応";
}

このスクリプトを Firefox 2.0 実行すると、次の画像が生成されます。

左の画像が PNG フォーマット、右の画像が JPEG フォーマットで生成された画像です。canvas では赤色の矩形しか描いていません。canvas の仕様では、描かれていない部分は黒の透明として扱われます。そのため、PNG フォーマットで生成すると、その部分は透明として生成されますが、JPEG では透明を表現できませんので、黒で塗りつぶされてしまいます。

[toDataURL() メソッドの実際のサンプル]

ブラウザ対応状況

image/png 以外に関しては、ブラウザによって対応している画像フォーマットが異なります。