注目キーワード

JavaScirptでCanvasの描画内容を保存する方法

JavaScirptでCanvasの描画内容を保存する方法
目次

Canvasとは

Canvas（キャンバス）は、HTML5で導入された要素で、JavaScriptを使って図形・画像・アニメーションなどを描画できる領域です。ゲーム開発や画像加工ツール、シミュレーションUIなど、さまざまな用途に活用されています。

サンプルコード

HTMLファイル：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas画像保存</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="300" style="border: 1px solid black;"></canvas>
    <br>
    <button id="saveButton">画像を保存</button>
    <script src="script.js"></script>
</body>
</html>

JavaScriptファイル（script.js）：

// Canvasに描画
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 背景とテキストを描画
ctx.fillStyle = "lightblue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "darkblue";
ctx.font = "30px Arial";
ctx.fillText("Hello, Canvas!", 150, 150);

// 保存処理
document.getElementById('saveButton').addEventListener('click', () => {
    const dataURL = canvas.toDataURL("image/png");
    const link = document.createElement('a');
    link.href = dataURL;
    link.download = 'canvas_image.png';
    link.click();
});

保存処理部分のコードの解説

1. Canvasの描画内容を画像データに変換する

Canvasの内容は、toDataURL()メソッドを使ってBase64形式のデータURIに変換できます。

const dataURL = canvas.toDataURL("image/png");
  • デフォルト形式: image/png
  • 他の形式：image/jpeg（第2引数で品質を0〜1の範囲で指定可能）

2. ダウンロードリンクを生成する

変換したデータURIを <a> タグの href に設定し、download 属性でファイル名を指定します。

const link = document.createElement('a');
link.href = dataURL;
link.download = 'canvas_image.png';

3. JavaScriptでクリックを自動実行

上記リンクをJavaScriptでクリックすることで、ユーザー操作なしに画像ダウンロードを開始できます。

link.click();

応用

JPEG形式で保存

const dataURL = canvas.toDataURL("image/jpeg", 0.9);

解像度を高くして保存

高解像度の画像を保存したい場合、一時的にCanvasのサイズを拡大してから描画と保存を行います。

// 仮に2倍の解像度で保存したい場合
const tempCanvas = document.createElement('canvas');
tempCanvas.width = canvas.width * 2;
tempCanvas.height = canvas.height * 2;
const tempCtx = tempCanvas.getContext('2d');
tempCtx.scale(2, 2);
tempCtx.drawImage(canvas, 0, 0);
const dataURL = tempCanvas.toDataURL("image/png");

サーバーへの画像送信

以下のようにfetchを使用して画像データをサーバーに送信できます。※ dataURL は toDataURL() の戻り値です。サーバー側ではBase64データをデコードして保存します。

fetch('/upload', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ image: dataURL })
});

まとめ

  • toDataURL() でCanvasの内容を画像形式に変換できる
  • a.download とJavaScriptで画像を即座にダウンロード可能
  • JPEG形式や高解像度化、サーバー送信も応用次第で簡単に対応可能

CanvasはUIにも画像生成にも応用範囲が広く、保存機能を持たせることでユーザーの利便性が格段に向上します。

FAQ

この記事は何について説明していますか？

この記事は、JavaScriptを使ってCanvasに描いた絵を保存する方法について説明しています。

Canvasとは何ですか？

Canvasは、HTML5で使える機能で、JavaScriptを使って図形や画像を描画できる領域のことです。

JavaScriptの知識は必要ですか？

はい、この方法を使うにはJavaScriptの基礎的な知識が必要です。

保存された絵は何の形式になりますか？

記事では具体的な形式は明記されていませんが、一般的には画像ファイル（例：PNG、JPEG）として保存されます。

この記事を読むことで何ができますか？

この記事を読むことで、Canvasに描いた絵をコンピュータに保存する方法を学ぶことができます。

まい

Webサービス制作会社で、Wordpressのテーマ開発や2Dシミュレーターの開発、JavaScriptを使用したフロントエンド周りの実装を担当しています。 JavaScriptが好きです。 最近は、3D Model Configuratorの制作にチャレンジしています。

JavaScriptカテゴリの最新記事