canvasに表示した内容を画像に変換する

canvasの内容を画像(データURI)に変換してみます。

サンプルコード

canvasに内容を適当に描画して、画像として出力させてみます。

HTML

<canvas id="canvas" width="480" height="320"></canvas>
<button id="output">出力</button>
<div id="result"></div>

JavaScript

window.onload = function() {
	draw();
}

var canvas;
var ctx;
function draw() {
	canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	ctx = canvas.getContext('2d');

	var img = new Image();
	img.src = 'image.jpg';
	img.onload = function() {
		// マスク
		ctx.beginPath();
		ctx.arc(240, 160, 150, 0, Math.PI * 2, false);
		ctx.clip();

		ctx.drawImage(img, 0, 0);

		ctx.font = 'bold 32px MS PGothic';
		ctx.fillStyle = '#ff0000';
		ctx.fillText('テスト', 260, 240);
	}
}

document.getElementById('output').addEventListener('click', function() {
	// canvasを画像に変換して出力
	var data = canvas.toDataURL();
	document.getElementById('result').innerHTML = '<img src="' + data + '">';
}, false);

canvasを画像に変換して出力している部分は30,31行目になります。
canvasを画像に変換するデモページ
　

第一引数で拡張子を指定できます。

JavaScript

window.onload = function() {
	draw();
}

var canvas;
var ctx;
function draw() {
	canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	ctx = canvas.getContext('2d');

	var img = new Image();
	img.src = 'image.jpg';
	img.onload = function() {
		// マスク
		ctx.beginPath();
		ctx.arc(240, 160, 150, 0, Math.PI * 2, false);
		ctx.clip();

		ctx.drawImage(img, 0, 0);

		ctx.font = 'bold 32px MS PGothic';
		ctx.fillStyle = '#ff0000';
		ctx.fillText('テスト', 260, 240);
	}
}

document.getElementById('output').addEventListener('click', function() {
	// canvasを画像に変換して出力
	var data = canvas.toDataURL('image/jpeg');
	document.getElementById('result').innerHTML = '<img src="' + data + '">';
}, false);

変換する拡張子を指定するデモページ
　

拡張子がjpegの場合、第二引数で画質を指定できます。

JavaScript

window.onload = function() {
	draw();
}

var canvas;
var ctx;
function draw() {
	canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	ctx = canvas.getContext('2d');

	var img = new Image();
	img.src = 'image.jpg';
	img.onload = function() {
		// マスク
		ctx.beginPath();
		ctx.arc(240, 160, 150, 0, Math.PI * 2, false);
		ctx.clip();

		ctx.drawImage(img, 0, 0);

		ctx.font = 'bold 32px MS PGothic';
		ctx.fillStyle = '#ff0000';
		ctx.fillText('テスト', 260, 240);
	}
}

document.getElementById('output').addEventListener('click', function() {
	// canvasを画像に変換して出力
	var data = canvas.toDataURL('image/jpeg', 0.2);
	document.getElementById('result').innerHTML = '<img src="' + data + '">';
}, false);

変換後の画質を指定するデモページ
　

【参考サイト】

• Canvas.toDataURL() – キャンパスをデータURIに変換する
• toDataURL() メソッド – Canvasリファレンス – HTML5.JP