web関連

【HTML5・javascript】canvasで描画したものを画像にする方法

2019/10/09

2019/10/15

/

【HTML5・javascript】canvasで描画したものを画像にする方法

canvasで描画したデータを画像にしようとしたときの備忘録

最低限必要なモノ

canvasで描画した図形を画像として出力するのに必要なもの
 

HTML

<canvas id="cv"></canvas>
<img id="img" src="">

canvasタグと出力用imgタグが必要

 

javascript

// カンバス描画に必要な記述
canvas = document.getElementById('cv');
ctx = canvas.getContext('2d');
…
// 描画したcanvasをimgタグに出力する記述
var png = canvas.toDataURL();
document.getElementById("img").src = png;

toDataURL()はcanvasに描画されているデータを「データURL(data:~)」として取得するメソッドらしい
「データURL(data:~)」は「データURIスキーム」の一種みたいで、どの方法でデータにアクセスするかどうかを示すものみたい
「http:,https:」や「tel:,mailto:,ftp:」なんかがほかにある

実際出力してみると

<img id="img" src="data:image/png;base64,…(長いので省略)…">

って感じで出力される

 

実際に出力してみた

//【html】
<canvas id="cv"></canvas>
<img id="img" src="">

//【javascript】
<script>
window.onload = function() {
	// canvas描画するのに必要な記述
	canvas = document.getElementById('cv');
	ctx = canvas.getContext('2d');

	// canvas描画エリア 始まり
	ctx.fillStyle = '#fdd735';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	ctx.lineWidth = 2;
	ctx.fillStyle = "#000";
	ctx.font = "bold 32px Roboto, Noto Sans JP, sans-serif";
	ctx.fillText('画像っす', 10, 32);
	// canvas描画エリア 終わり

	// imgタグにcanvasで作った画像urlを挿入
	var png = canvas.toDataURL();
	document.getElementById("img").src = png;
}
</script>
以下が実際に出力した表示

↓canvas

↓画像

右クリックでダウンロードできるはず
 

次は画像をディレクトリに保存するところまでやりたい