【JavaScript入門】Data URLの取り出し

描画が終わった Canvas を「そのまま画像ファイル」に変換したいときは Data URL が最も手軽です。Data URL は data:種類;base64,…… という文字列で、実際の PNG/JPEG バイト列を Base64 にしたもの。<img src=""> や CSS の background-image に直接差し込めるうえ、ダウンロードリンクとしても機能します。
　ここでは toDataURL() の基本と品質指定、そして取得した文字列を即座に <img> へ挿入するまでの流れを確認します。

Data URL を取り出すメソッド

メソッド	概要
canvas.toDataURL(type = "image/png", quality?)	PNG または JPEG の Data URL を生成。`type` に `"image/jpeg"` を渡すと JPEG 化され、`quality` (0 – 1) で圧縮率を調整できる (既定 0.92)。

注意：クロスオリジン画像を描画した直後の Canvas は「汚染 (tainted)」状態となり、toDataURL() がセキュリティ例外を投げます。CORS 対応画像か同一オリジンのみ利用しましょう。

サンプルプログラム

ファイル名： export_dataurl.html

PNGファイルのダウンロードは、ここ「checker.png」からできます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>📤 Data URL Export Demo</title>
<style>
  body   {font-family:"Segoe UI",sans-serif;background:#f4f9ff;text-align:center;margin:2rem}
  h1     {font-size:1.8rem;margin-bottom:1rem}
  canvas {border:1px solid #666;border-radius:6px;background:url(./checker.png)}
  #note  {margin-top:.8rem;color:#00695c;font-weight:bold}
</style>
</head>
<body>
  <h1>📤 Data URL の取り出し</h1>
  <canvas id="srcCanvas" width="420" height="180"></canvas>
  <p id="note">下に Data URL から生成した画像が表示されます</p>

<script>
(() => {
  const cvs = document.getElementById('srcCanvas');
  const ctx = cvs.getContext('2d');
  const W = cvs.width, H = cvs.height;

  /* 1️⃣ 簡単な縦グラデーションを描画 */
  for (let y = 0; y < H; y++) {
    const r = (y / H) * 255;       // 赤↑
    const g = 255 - r;             // 緑↓
    ctx.fillStyle = `rgb(${r},${g},255)`;
    ctx.fillRect(0, y, W, 1);
  }

  /* 2️⃣ PNG の Data URL を取得 */
  const pngURL = cvs.toDataURL();              // 省略時は image/png
  console.log('PNG:', pngURL.slice(0,60) + '…');

  /* 3️⃣ JPEG 80% 品質を取得 */
  const jpegURL = cvs.toDataURL('image/jpeg', .8);
  console.log('JPEG:', jpegURL.slice(0,60) + '…');

  /* 4️⃣ <img> 要素を生成してページに追加 */
  const img1 = new Image();
  img1.src = pngURL;
  img1.alt = 'PNG Export';
  img1.style.margin = '12px';

  const img2 = new Image();
  img2.src = jpegURL;
  img2.alt = 'JPEG Export';
  img2.style.margin = '12px';

  document.body.append(img1, img2);

  /* 5️⃣ ダウンロードリンクも生成 (おまけ) */
  const link = document.createElement('a');
  link.href = jpegURL;
  link.download = 'canvas_export.jpg';
  link.textContent = 'JPEG を保存する';
  link.style.display = 'block';
  link.style.marginTop = '16px';
  document.body.appendChild(link);
})();
</script>
</body>
</html>

ブラウザの出力例

プログラム解説

描画は何でも OK。ここでは RGB グラデーションを 1 ラインずつ塗りつぶし。
toDataURL() を PNG/JPEG の 2 通りで取得。PNG は可逆圧縮、JPEG は品質 (quality) を下げればファイルサイズ節約。
生成された文字列を new Image() に渡すと、その場で <img> に早変わり。ブラウザが自動でデコードして描画します。
<a download> に Data URL を設定すれば、ワンクリックでローカル保存可能。ユーザーにファイルを渡す場合に便利。

まとめ

canvas.toDataURL() は Canvas 内容を 即座に画像ファイル化 する強力な API。
type と quality で PNG/JPEG 出力を切替え。PNG は透過保持、JPEG は軽量。
取得した文字列は <img> や <a download> にそのまま使えるため、プレビューとダウンロード機能をワンソースで構築できる。

　これでオフライン画像エクスポートの仕組みは完成です。次は複数 Canvas を合成して Data URL にまとめる「簡易レイヤ合成アプリ」に挑戦してみましょう！