JavaScriptでキャンバスの内容を画像にする

JavaScriptを使って、キャンバスの内容を画像として表示したり、保存する方法です。
次のようなHTMLがあるとします。

<div>
    <canvas id="drawCanvas" style="border: 1px solid black; direction: ltr;"></canvas>
</div>
<div>
    <img id="canvasImg" src="">
</div>

Imgタグに表示する

toDataURL()で画像のDataURLを取得します。
画像フォーマットはimage/jpegimage/pngなどが指定できます。デフォルトはimage/pngです。

const canvas = document.getElementById('drawCanvas');
const base64 = canvas.toDataURL('image/jpeg', 0.75);
// imgタグに表示
document.getElementById('canvasImg').src = base64;

パラメータ2は画質で、image/jpegなどの場合に、0から1の範囲で指定できます。

画像を保存する

次のようにリンクタグを使って、変換した画像をダウンロード保存させます。

let a = document.createElement('a');
a.href = base64;
a.download = "canvas.jpg";
a.click();
このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

関連コンテンツ

スポンサードリンク

コメント

メールアドレスが公開されることはありません。