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/jpegやimage/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();
