Sobelフィルタの勉強

参考にしているサイト http://jstap.web.fc2.com/test/html5/filtering/filtering.html

by s_hiroshi

HTML

<canvas id="canvas1" width="100", height="100"></canvas>
<button id="sobel">Sobel Filter</button>

CSS

#canvas {
    background: #EEE;
}

JavaScript

/**
 * reference sobel script
 * http://jstap.web.fc2.com/test/html5/filtering/filtering.html
 */


(function($) {
    
    var canvas1 = $('#canvas1').get(0),
        cxt1 = canvas1.getContext('2d'),
        cxt2 = canvas1.getContext('2d'),
        canvasData1,
        canvasData2;
    
    cxt1.fillStyle = '#F8F8F8';
    cxt1.fillRect(0, 0, 100, 100);
    cxt1.fillStyle = '#666666';
    cxt1.beginPath(); 
    cxt1.moveTo(10, 10);
    cxt1.lineTo(90, 10);
    cxt1.lineTo(90, 90);
    cxt1.lineTo(10, 90);
    cxt1.closePath();
    cxt1.fill();


    /**
     * 
     */

    function setPixel() {
        if (arguments.length <= 2) {
            return;
        }

        var x = arguments[0];
        var y = arguments[1];
        // グレースケールの場合だけ
        
        canvasData2.data[(y * canvasData2.width + x) * 4] = arguments[2];
        canvasData2.data[(y * canvasData2.width + x) * 4 + 1] = arguments[2];
        canvasData2.data[(y * canvasData2.width + x) * 4 + 2] = arguments[2];
        canvasData2.data[(y * canvasData2.width + x) * 4 + 3] = 255;
    }


    /**
     *　get canvasData.data
     */

    function getPixel(x, y) {
        // only grayscale
        return canvasData1.data[(y * canvasData1.width + x) * 4];
    }


    /**
     * 空間フィルタリング(グレースケール)
     */

    function sobel() {

        canvasData1 = cxt1.getImageData(0, 0, canvas1.width, canvas1.height);
        canvasData2 = cxt2.getImageData(0, 0, canvas1.width, canvas1.height);

        var filter = [-1, 0, 1, -2, 0, 2, -1, 0, 1];
        var init = 1;
        var from = -init;
        var to = init;

        var sum, absSum;
        var n, m, x, y;

        // 端は考慮しない
        for (y = 1; y < canvasData1.height - 1; y++) {
            for (x = 1; x < canvasData1.width - 1; x++) {
                sum = 0;
                // init = 1,
                // (n + init) * 3 + m + init
                // (-1, -1) => 0, (-1, 0) => 1, (-1, 1) => 2
                // ( 0, -1) => 3, ( 0, 0) => 4, ( 0, 1) => 5
...