HTML5でConvolutionFilter

HTML5のcanvasを使って簡単な画像処理をやってみます。
試してみたのは基本的な畳み込みフィルタ。
今回はAS3のConvolutionFilter風のインタフェースで作りました。

Demo: HTML5 Image Processing (Convolution Filter)　(Firefox3.5とSafari4で動作確認しています)

汎用的に作ろうとすると少し時間がかかりそうだったので、ひとまず畳み込みフィルタの部分だけ。
引数はAS3のものよりずっと少なく、matrix, divisor, bias の3つ。
matrixXやmatrixYも用意してないのでフィルタカーネルのサイズは3×3限定だし、
異常系の処理も不十分で修正が必要ですが；；
他のフィルタ類は時間を見つけて作ってみようと思います。

・クライアント例

var context = document.getElementById('Canvas').getContext('2d');
var bmp = new Bitmap('sample.jpg', context);
var matrix = [-1, -1, -1,  -1,  8, -1,  -1, -1, -1];　// フィルタカーネル
var divisor = 1;
var bias = 0;
bmp.applyFilter(new ConvolutionFilter(matrix, divisor, bias));

bitmap.js

  var Bitmap =  function(source, context) {
    this.initialize.apply(this, arguments);
  };

  var ConvolutionFilter = function(matrix, divisor, bias) {
    this.initialize.apply(this, arguments);
  };

  Bitmap.prototype = {
    initialize : function(source, context) {
      this.bitmapData = new Image();
      this.bitmapData.src = source;
      this.width = this.bitmapData.width;
      this.height = this.bitmapData.height;
      this.context = context;
      this.bitmapData.addEventListener('error', function() { alert("can't load image"); }, false);
    },
    applyFilter : function(filter) {
      try {
        this.context.drawImage(this.bitmapData, 0, 0);
        var src = this.context.getImageData(0, 0, this.width, this.height);
        var dst = this.context.createImageData(this.width, this.height);
        //var gray = context.createImageData(this.width, this.height);
        filter.apply(src, dst);
        this.context.putImageData(dst, 0, 0);
      }catch(e) {
        alert(e);
      }
    }
  };

  ConvolutionFilter.prototype = {
    initialize : function(matrix, divisor, bias) {
      this.matrix = matrix;
      this.divisor = divisor;
      this.bias = bias;
    },
    apply : function(src, dst) {
      var w = src.width, h = src.height;
      var srcData = src.data;
      var dstData = dst.data;

      //this.cvtColor.apply(this, [src, dst, 'gray']);

      for(var y=1;y<h-1;++y) {
        for(var x=1;x<w-1;++x) {
          var idx = 0;
          var r = 0, g = 0, b = 0;
          //var d = 0;
          var i = (y*w + x) << 2;
          for(var ky=-1;ky<=1;++ky) {
            for(var kx=-1;kx<=1;++kx) {
              var pos = (ky*w << 2) + (kx << 2);
              r += srcData[i + pos]*this.matrix[idx];
              g += srcData[i + pos + 1]*this.matrix[idx];
              b += srcData[i + pos + 2]*this.matrix[idx];
              //d += srcData[i + pos]*this.matrix[idx++];
              idx++;
            }
          }
          dstData[i] = r/this.divisor + this.bias;
          dstData[i + 1] = g/this.divisor + this.bias;
          dstData[i + 2] = b/this.divisor + this.bias;
          dstData[i + 3] = 255;
        }
      }
      // for Firefox
      dstData.forEach(function(n, i, arr) { arr[i] = n<0 ? 0 : n>255 ? 255 : n; });
    },
    cvtColor : function(src, dst, mode) {
      var w = src.width, h = src.height;
      var srcData = src.data;
      var dstData = dst.data;
      switch(mode) {
      case "gray":
        for(var y=0;y<h;y++) {
          for(var x=0;x<w;x++) {
            var i = (y*w + x) << 2;
            dstData[i] = (77*srcData[i] + 150*srcData[i + 1] + 29*srcData[i + 2]) >> 8;
            dstData[i + 1] = dstData[i];
            dstData[i + 2] = dstData[i];
            dstData[i + 3] = 255;
          }
        }
        break;
      case "hsv":
        // TODO
        break;
      case "lab":
        // TODO
        break;
      default:
        break;
      }
    }
  };

ポイントを絞って簡単に説明を。
(以下 context は getContext(‘2d’) で取得したオブジェクト)

* imagedata = context.createImageData(sw, sh)
幅sw, 高さshのImageDataオブジェクトを生成します。
ピクセルデータ(imageData.data)はすべて0(黒)になっています。

* imageData = context.getImageData(sx, sy, sw, sh)
(x, y)=(sx, sy) を基準に幅sw, 高さshの領域のピクセルデータを取得できます(imageData.data)。
これはAS3における BitmapData.getPixels() のようなもので、ARGB32bitのデータを扱い、
インデックスは 0～幅×高さ×4-1 まで。

* context.putImageData(imagedata, dx, dy)
指定されたImageDataオブジェクトを (x, y)=(dx, dy) を基準に描画します。

・参考記事
createImageData, getImageData, putImageData メソッド – Canvasリファレンス – HTML5.JP
・関連記事
HTML5の勉強

Tags: cv/im, javascript