HTML Canvasでピクセル情報を取得する
HTML Canvasでピクセル情報を取得するコードを紹介します。
概要
HTML Canvasでピクセル情報を取得する場合は、getImageData() メソッドを利用します。
プログラム
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('SimpleCanvas');
if (!canvas || !canvas.getContext) {
return false;
}
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function onImageLoad() {
context.drawImage(img, 0, 0);
var imageData = context.getImageData(64, 64, 1, 1);
var outFrame = document.getElementById('output');
outFrame.innerText = "(R,G,B,a) = (" + imageData.data[0] + "," + imageData.data[1] + "," + imageData.data[2] + "," + imageData.data[3] + ")";
}
img.src = 'resource/img03.png'; //相対URLの場合
//img.src = 'http://www.ipentec.com/demo/canvas/resource/img03.png';
}
</script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
<canvas id="SimpleCanvas" width="640" height="360" style="background-color:#FFFFFF;"></canvas>
<div>Canvas Demo</div>
<div id="output"></div>
</body>
</html>
解説
下記コードでCanvasを定義します。
<canvas id="SimpleCanvas" width="640" height="360" style="background-color:#FFFFFF;"></canvas>
ページ表示時にbodyタグのonloadにより下記のdraw関数が実行されます。
function draw() {
var canvas = document.getElementById('SimpleCanvas');
if (!canvas || !canvas.getContext) {
return false;
}
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function onImageLoad() {
context.drawImage(img, 0, 0);
var imageData = context.getImageData(64, 64, 1, 1);
var outFrame = document.getElementById('output');
outFrame.innerText = "(R,G,B,a) = (" + imageData.data[0] + "," + imageData.data[1] + "," + imageData.data[2] + "," + imageData.data[3] + ")";
}
img.src = 'resource/img03.png'; //相対URLの場合
//img.src = 'http://www.ipentec.com/demo/canvas/resource/img03.png';
}
下記コードに関しては、画像をCanvasに描画するコードになります。動作の詳細は「
HTML Canvas を利用して画像を描画する」の記事を参照してください。
var canvas = document.getElementById('SimpleCanvas');
if (!canvas || !canvas.getContext) {
return false;
}
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function onImageLoad() {
context.drawImage(img, 0, 0);
}
img.src = 'resource/img03.png'; //相対URLの場合
画像読み込み後のonImageLoad()の下記コードがピクセル情報の取得コードになります。
var imageData = context.getImageData(64, 64, 1, 1);
var outFrame = document.getElementById('output');
outFrame.innerText = "(R,G,B,a) = (" + imageData.data[0] + "," + imageData.data[1] + "," + imageData.data[2] + "," + imageData.data[3] + ")";
下記コードでCanvasのピクセル情報を取得します。第一引数がピクセルを取得する開始X座標、第二引数がピクセルを取得する開始Y座標、第三引数がピクセル情報を取得する領域の幅、第四引数がピクセル情報を取得する領域の高さを与えます。戻り値にピクセル情報が返ります。
下記の例では、(X,Y)=(64,64)座標のピクセル情報を取得します。
var imageData = context.getImageData(64, 64, 1, 1);
ピクセル情報の形式は下記になります。
ピクセルは領域の左上から右下方向に向かって格納されます。
| data[0] | R成分 |
| data[1] | G成分 |
| data[2] | B成分 |
| data[3] | Alpha成分 |
| data[4] | R成分 |
| data[5] | G成分 |
| data[6] | B成分 |
| data[7] | Alpha成分 |
| data[8] | R成分 |
| data[9] | G成分 |
| data[10] | B成分 |
| data[11] | Alpha成分 |
取得したピクセル情報を表示します。今回は高さ1、幅1の領域を取得したため、data[0]～data[3]までの値を表示します。
var outFrame = document.getElementById('output');
outFrame.innerText = "(R,G,B,a) = (" + imageData.data[0] + "," + imageData.data[1] + "," + imageData.data[2] + "," + imageData.data[3] + ")";
実行結果
HTMLファイルを表示します。ピクセルのカラー情報が画面下部のエリアに表示されます。
取得ピクセルの位置を変更した場合の例です。
上記コードのgetImageData部分を下記に変更しています。
var imageData = context.getImageData(120, 30, 1, 1);
ピクセルのカラー情報が取得できていることが確認できます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
