HTML Canvasでピクセル情報を設定する

HTML Canvasでピクセル情報を設定するコードを紹介します。

概要

ピクセル情報をCanvasに設定するにはputImageData()メソッドを利用します。

プログラム

コード

下記の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(96, 96, 8, 8);
        for (i=0; i<64; i++){
          imageData.data[i * 4 + 0] = 0xFF;
          imageData.data[i * 4 + 1] = 0x00;
          imageData.data[i * 4 + 2] = 0x00;
          imageData.data[i * 4 + 3] = 0xFF;
        }
        context.putImageData(imageData, 96, 96);
      }

      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>
</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(96, 96, 8, 8);
        for (i=0; i<64; i++){
          imageData.data[i * 4 + 0] = 0xFF;
          imageData.data[i * 4 + 1] = 0x00;
          imageData.data[i * 4 + 2] = 0x00;
          imageData.data[i * 4 + 3] = 0xFF;
        }
        context.putImageData(imageData, 96, 96);
      }

      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(96, 96, 8, 8);
  for (i=0; i<64; i++){
    imageData.data[i * 4 + 0] = 0xFF;
    imageData.data[i * 4 + 1] = 0x00;
    imageData.data[i * 4 + 2] = 0x00;
    imageData.data[i * 4 + 3] = 0xFF;
  }
  context.putImageData(imageData, 96, 96);

下記コードでCanvasの元のピクセル情報を取得します。今回は(X,Y)=(96,96)の位置から縦8ピクセル、横8ピクセルの領域のピクセル情報を取得します。

  var imageData = context.getImageData(96, 96, 8, 8);

取得した領域のピクセル情報をすべて赤(R,G,B,a)=(255,0,0,255)に変更します。

  for (i=0; i<64; i++){
    imageData.data[i * 4 + 0] = 0xFF;
    imageData.data[i * 4 + 1] = 0x00;
    imageData.data[i * 4 + 2] = 0x00;
    imageData.data[i * 4 + 3] = 0xFF;
  }

変更したピクセル情報をCanvasに設定します。このコードにより、Canvasの(X,Y)=(96,96)の位置から縦8ピクセル、横8ピクセルの領域が赤になります。

  context.putImageData(imageData, 96, 96);

なお、ピクセル情報の形式は下記になります。
ピクセルは領域の左上から右下方向に向かって格納されます。

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成分

実行結果

HTMLファイルを表示します。
Canvasの(X,Y)=(96,96)の位置に、縦8px,横8pxの赤の領域が表示されます。

参考：Canvasの元のピクセル情報を参照しない場合

Canvasの元のピクセル情報を参照しない場合は、createImageData()メソッドを利用してピクセル情報を格納するオブジェクトを新規に作成する方法も利用できます。createImageData()メソッドの第一引数に作成するオブジェクトの幅、第二引数に高さを与えます。

<!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.createImageData(8, 8);

        for (i=0; i<64; i++){
          imageData.data[i * 4 + 0] = 0x00;
          imageData.data[i * 4 + 1] = 0xFF;
          imageData.data[i * 4 + 2] = 0x00;
          imageData.data[i * 4 + 3] = 0xFF;
        }
        context.putImageData(imageData, 96, 96);
      }

      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>
</body>
</html>

実行結果

Canvasの(X,Y)=(96,96)の位置に、縦8px,横8pxの緑の領域が表示されます。

著者

Penta

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

目次

HTML Canvasでピクセル情報を設定する

概要

プログラム

コード

解説

実行結果

参考：Canvasの元のピクセル情報を参照しない場合

実行結果

関連するページ