Canvas から画像を取得 — canvas.toDataURL('image/png')
canvas.toDataURL() は Canvas の内容を画像データ（Base64形式の文字列）に変換するメソッドです。これを使うと、描いた絵を保存したり、別の場所に表示したりできます。初心者がまず試すのは「Canvasに描いた絵をPNG画像としてダウンロード」することです。
基本のコード例
<canvas id="c" width="200" height="200" style="border:1px solid #ccc"></canvas>
<button id="save">画像取得</button>
<img id="preview" style="max-width:200px">
<script>
const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
// 適当に描画
ctx.fillStyle = "skyblue";
ctx.fillRect(0, 0, 200, 200);
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);
document.getElementById("save").addEventListener("click", () => {
// 1) CanvasをPNG形式のDataURLに変換
const dataURL = canvas.toDataURL("image/png");
// 2) 画像として表示
document.getElementById("preview").src = dataURL;
// 3) ダウンロード用リンクを作成
const a = document.createElement("a");
a.href = dataURL;
a.download = "canvas.png";
a.click();
});
</script>
toDataURL('image/png'): PNG形式で取得。引数を"image/jpeg"にするとJPEG形式。- 戻り値:
"data:image/png;base64,..."のような長い文字列。
よく使うテンプレート集
JPEG形式で取得（品質指定あり）
const dataURL = canvas.toDataURL("image/jpeg", 0.8); // 品質80%
サーバーに送信する（例: fetchでPOST）
const dataURL = canvas.toDataURL("image/png");
fetch("/upload", {
method: "POST",
body: JSON.stringify({ image: dataURL }),
headers: { "Content-Type": "application/json" }
});
別のCanvasにコピー
const img = new Image();
img.src = canvas.toDataURL("image/png");
img.onload = () => {
otherCtx.drawImage(img, 0, 0);
};
例題: お絵描き → 保存ボタンでダウンロード
<canvas id="paint" width="300" height="200" style="border:1px solid #ccc"></canvas>
<button id="download">保存</button>
<script>
const canvas = document.getElementById("paint");
const ctx = canvas.getContext("2d");
// 簡単なお絵描き機能
let drawing = false;
canvas.addEventListener("mousedown", () => drawing = true);
canvas.addEventListener("mouseup", () => drawing = false);
canvas.addEventListener("mousemove", (e) => {
if (!drawing) return;
ctx.fillStyle = "black";
ctx.fillRect(e.offsetX, e.offsetY, 2, 2);
});
// 保存ボタン
document.getElementById("download").addEventListener("click", () => {
const url = canvas.toDataURL("image/png");
const a = document.createElement("a");
a.href = url;
a.download = "drawing.png";
a.click();
});
</script>
- 効果: Canvasに描いた落書きを「drawing.png」として保存できる。
実務でのコツ
- 形式選択: PNGは可逆・透明対応、JPEGは容量が小さく写真向き。
- 品質指定: JPEGは第2引数で品質（0〜1）を指定可能。
- 大きなCanvas: DataURLは文字列が非常に長くなる。サーバー送信時は容量に注意。
- 透明背景: PNGなら透明を保持。JPEGは常に不透明。
- セキュリティ: クロスオリジン画像を描画したCanvasは「汚染」され、
toDataURLが使えなくなる。CORS設定が必要。
ありがちなハマりポイントと対策
- 画像が真っ白:
- 原因: 画像が読み込まれる前に描画している。
- 対策:
img.onloadの中でdrawImage→ その後toDataURL。
- 文字列が長すぎて扱いづらい:
- 対策: サーバーに送る場合は Blob に変換して送る方が効率的。
- クロスオリジン画像でエラー:
- 対策: サーバー側で
Access-Control-Allow-Originを設定し、img.crossOrigin = "anonymous"を指定。
- 対策: サーバー側で
練習問題（サムネイル生成）
「Canvasに画像を描いて、サムネイルPNGを取得して <img> に表示」
<canvas id="thumb" width="150" height="150"></canvas>
<img id="preview">
<script>
const canvas = document.getElementById("thumb");
const ctx = canvas.getContext("2d");
const img = new Image();
img.src = "photo.jpg";
img.onload = () => {
ctx.drawImage(img, 0, 0, 150, 150);
const dataURL = canvas.toDataURL("image/png");
document.getElementById("preview").src = dataURL;
};
</script>
直感的な指針
- Canvas →
toDataURL→ 画像文字列。 - PNG/JPEGを選び、ダウンロードや表示に使う。
- 必ず画像読み込み後に呼び出す。
- 容量やクロスオリジン制約に注意。
これを覚えれば「描いた絵を保存する」「サーバーに送る」「別の場所に表示する」が一気にできるようになります。