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);

ピクセルのカラー情報が取得できていることが確認できます。

著者

Penta

iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

目次

HTML Canvasでピクセル情報を取得する

概要

プログラム

コード

解説

実行結果

関連するページ