Javascript + HTML5を使った画像処理

HTML5のcanvasエレメントを使うと画像のピクセル処理ができると知りまして、試しにJavascriptで画像処理プログラムを書いてみました。
「画像処理なんてServer Sideでやれよ!」とか「なんでC++ではなくてJavascript?」というご指摘もありそうですがご容赦のほどを。

デモを公開しました。

注意点など

•  デモを見るにはHTML5対応のブラウザが必要（当たり前）。
•  サイズの大きなメディアンフィルタのデモは少し時間がかかるので、気長に待ってください。
•  サーバサイド側では何もしていません。興味のある方はhtmlのソースを見てください。役に立ちそうなら、勝手に使っちゃってください。（でもこのブログにリンクとか張ってくれると、とても嬉しいです。）
•  今のところ以下の処理が選択できます。がんばって増やします!!
• 輝度変換
• グレースケール化（YUV画像ののY値信号のみ取り出し）
• メディアンフィルタ(3x3, 5x5, 7x7)
• 判別分析法による2値化
• Prewitt Filter
• Sobel Filter
• Laplacian Filter
• Sharpening Filter
• LOG Filter(エッジ検出)
•  今後、試したい処理
• Gammaカーブ変更
• コーナー検出
• ハフ変換
• パターンマッチング
• アフィン変換
• 画像のResampling
• フーリエ変換
• バイラテラルフィルタ
• ラベリング

ソースコード例

上記のURLからソースコードを読むと余計なコードが入っていますので、純粋に画像処理部分だけ抜き出したコードを下に示します。
興味がある方は、サンプルサイトのソースコードを読んでみてください。

判別分析法による2値化

function binalyze(srcRgbImageData, destImageData)
{
     var step = 4;
     var LEN = 256, MAX=255;
     var srcRgb = srcRgbImageData.data;
     var dest = destImageData.data;
     var imgWidth = srcRgbImageData.width;
     var imgHeight = srcRgbImageData.height;
     var s;
     var allave = 0, allsum = 0;
     var max = 0, sigmaw2 = 0, sigmab2 = 0, tmp = 0;
     var hist = new Array(LEN);
     for (var j = 0; j < LEN; j++){
         hist[j] = 0;
     }
     
     for(var i = 0, n = srcRgb.length; i < n; i+= step){
         var yValue = 0.299 * srcRgb[i] + 0.587 * srcRgb[i+1] + 0.114 * srcRgb[i+2];
         yValue = yValue > MAX ? MAX : yValue;
         dest[i] = yValue;
         allsum += yValue;
         hist[yValue]++; 
     }

     allave = allsum / n;
     var s1 = new Statistics();
     var s2 = new Statistics();

     for(i = 0; i < LEN; i++){
         if(!calcAndSetStatistics(hist, 0, i, s1)){
             continue;
         }
         if(!calcAndSetStatistics(hist, i+1, MAX, s2)){
             continue;
         }

         sigmaw2 = (s1.num * s1.sigma2 + s2.num * s2.sigma2)/ (s1.num + s2.num);
         sigmab2 = (s1.num * (s1.ave - allave) * (s1.ave - allave) + s2.num * (s2.ave - allave) * (s2.ave - allave)) 
             / (s1.num + s2.num);
         tmp = sigmab2 / sigmaw2;

         if(tmp > max){
    
         max = tmp;
             s = i;
         }
     }
     
     for(var i = 0; i < n; i+= step){
         if(dest[i] > s){
             dest[i] = MAX;
             dest[i+1] = MAX;
             dest[i+2] = MAX;
         }
         else{
             dest[i] = 0;
             dest[i+1] = 0;
             dest[i+2] = 0;
         }
         dest[i+3] = MAX;
     }
}


function calcAndSetStatistics(adr, top, end, statistics){
    var f = 0, sum = 0, sum2 = 0, num = 0;
    for(var i = top; i < end + 1; i++){
        f = adr[i];
        num += f;
        sum += f * i;
        sum2 += f * i * i;
    }
    if(num == 0){
        return false;
    }
    statistics.num = num;
    statistics.ave = sum / num;
    statistics.sigma2 = (sum2 / num) - statistics.ave * statistics.ave;
    return true;
}

function Statistics(){
    this.num = 0;
    this.ave = 0;
    this.sigma2 = 0;
}

参考になるサイト

• Pixastic: Javascriptの画像処理ライブラリ
• ROBO Design: HTML5のCanvasとJavascriptで、画像の色ヒストグラムを生成するデモが公開されています。
• HTML5's canvas Part II: Pixel Manipulation: このページを読めば、HTML5のCanavas上での画像処理ほとんど理解できてしまうほど詳しく解説されています。サンプルも多くお勧めです！
• 基本的な画像処理手法について: 基本的な画像処理に関することが丁寧かつ簡潔に解説されています。