S_a_k_Uの日記みたいなDB

～サクゥーと呼ばないで～

canvasタグに描画された状態をキャプチャする

技術メモ HTML JavaScript

下記を参考に、jQueryを使ってサンプルコード書いてみた。
HTML5のvideoとcanvasで動画のキャプチャを取る
 HTML5のCanvasで作る、Flash不要のお絵かきツール

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>canvasタグのキャプチャ</title>
</head>
<body>
	<div id="header">
	下の枠のcanvasタグのキャプチャを撮ります。<br>
	枠の下のキャプチャボタンを押してください。<br>
	</div>
	<div id="paint">
		<canvas id="paintCanvas"></canvas>
	</div>
	<button id="captureButton">キャプチャ</button>
	<div id="captureImage">
	</div>
</body>

<!-- jQuery -->
<script src="jquery-1.10.2.js"></script>

<script type="text/javascript">

// キャプチャとペイントの共通処理
var canvas = $('#paintCanvas').get(0);
var context = canvas.getContext("2d");
function getX(x) {
	return x - canvas.offsetLeft;
}
function getY(y) {
	return y - canvas.offsetTop;
}

// canvas初期表示
canvas.width = 320;
canvas.height = 240;
context.strokeStyle = "rgba(0, 0, 0, 1)";
context.lineWidth = 1;
context.strokeRect(0, 0, canvas.width, canvas.height);

// キャプチャ処理
(function($){
	function getCapture(){
		var img = new Image();
		img.src = canvas.toDataURL('image/png');
		img.onload = function(){
			img.width = img.width / 2;
			img.height = img.height / 2;
			console.log(img.width);
			$('#captureImage').append(img);
		}
	}
	$('#captureButton').click(getCapture);
})(jQuery);

// ペイントのイベント処理定義
var drawFlag = false;
var oldX = 0;
var oldY = 0;
var lineWidth = 4;
window.addEventListener("load", function(){
    canvas.addEventListener("mousemove", draw, true);
    canvas.addEventListener("mousedown", function(e){
        drawFlag = true;
        oldX = getX(e.clientX);
        oldY = getY(e.clientY);
    }, false);
    canvas.addEventListener("mouseup", function(){
           drawFlag = false;
    }, false);
}, true);

// ペイント描画処理
function draw(e){
    if (!drawFlag) return;
    var x = getX(e.clientX);
    var y = getY(e.clientY);
    context.strokeStyle = "rgba(255,0,0,1)";
    context.lineWidth = lineWidth;
    context.beginPath();
    context.moveTo(oldX, oldY);
    context.lineTo(x, y);
    context.stroke();
    context.closePath();
    oldX = x;
    oldY = y;
}

</script>
</html>
</body>

実行結果

初期表示

４回キャプチャした後