JS/jQueryでCanvasを使って画像の画素Pixelへアクセスし画素値を取得する

ちょっとJavascriptで画像処理をしてみたくなったので、手始めに画素値へのアクセスの仕方を紹介します。

画素値を取得

// 読み込む画像ファイルを指定
var img    = $(''),
    canvas = $('<canvas/>');

img.on('load', function()
{
  var rows = img[0].height,  // 行数
      cols = img[0].width;   // 列数
  
  // Canvasに横幅と縦幅を設定
  canvas.attr(
  {
    'width' : cols,
    'height': rows
  });
  
  // Canvas上に画像を描画
  canvas[0].getContext('2d').drawImage(img[0], 0, 0, cols, rows);
  
  // 各画素にアクセス
  for (var i = 0; i < rows; ++i)
  {
    for (var j = 0; j < cols; ++j)
    {
      var pixel = canvas[0].getContext('2d').getImageData(i, j, 1, 1).data;
      console.log('座標(' + i + ',' + j + ') R:' + pixel[0] + ' G:' + pixel[1] + ' B:' + pixel[2] + ' α:' + pixel[3]);
    }
  }
});

画素値は img タグから直接取得できないので、canvas 要素を利用します。