Task: http://d309jmebo4xh7g.cloudfront.net/tasks/16/task.gif - get letter's count. Algorithm: http://habrahabr.ru/post/119244/

connecting_objects_labeling.html

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<style type="text/css">
    table {
        font-size: 1px;
        line-height: 1px;
    }
</style>


<!--WARNING!!!! Only local image-->
<img src="./task.gif"/>

<canvas/>

<script>

    Object.prototype.size = function() {
        var size = 0, key;
        for (key in this) {
            if (this.hasOwnProperty(key)) size++;
        }

        return size;
    };

    var image = document.getElementsByTagName('img')[0],
            canvas = document.getElementsByTagName('canvas')[0];
    canvas.width = image.width;
    canvas.height = image.height;
    console.log(image.width, image.height);
    var context = canvas.getContext('2d');

    context.drawImage(image, 0, 0, image.width, image.height);

    var binaryImageMatrix = [
        []
    ];

    var counter = 0;

    var binaryMatrixX = image.width,
            binaryMatrixY = image.height
            ;

    for (var y = 0; y < binaryMatrixY; y++) {
        for (var x = 0; x < binaryMatrixX; x++) {
            var pixelData = context.getImageData(x, y, 1, 1).data;

            if (!binaryImageMatrix[y]) {
                binaryImageMatrix[y] = [];
            }

            if (pixelData[0] == 255 || pixelData[1] == 255 || pixelData[2] == 255) {
                binaryImageMatrix[y][x] = 0;
            } else {
                binaryImageMatrix[y][x] = 1;
            }
        }
    }


    var tmpData = [
        [1, 1, 1, 1, 1, 1, 1],
        [1, 1, 0, 0, 1, 1, 1],
        [0, 0, 0, 0, 0, 0, 0],
        [1, 1, 1, 0, 0, 1, 1],
        [0, 0, 1, 1, 0, 1, 1],
        [0, 0, 1, 0, 0, 1, 0],
        [0, 1, 1, 0, 0, 0, 0],
        [0, 1, 1, 0, 0, 0, 0]
    ];

    //drawMatrix(binaryImageMatrix);

    labelBinaryMatrix(binaryImageMatrix);
    //labelBinaryMatrix(tmpData);

    function labelBinaryMatrix(matrix) {
        var xSize = matrix[0].length,
                ySize = matrix.length,
                startLabel = 1,
                islands = {}
                ;

        function setIsland(y, x, label)
        {
            if (!islands[label]) {
                islands[label] = [];
            }
            islands[label].push({x: x, y: y});
        }

        function islandMerge(from, to) {
            var fromLength = islands[from].length;
            for (var i = 0; i < fromLength; i++) {
                var data = islands[from][i];
                islands[to].push(data);
                matrix[data.y][data.x] = to;
            }
            delete islands[from];
        }

        for (var y = 0; y < ySize; y++) {
            for (var x = 0; x < xSize; x++) {
                var bPos = x - 1,
                        cPos = y - 1,
                        a = matrix[y][x],
                        b = 0,
                        c = 0
                        ;

                if (bPos < 0) {
                    bPos = 0;
                    b = 0;
                } else {
                    b = matrix[y][bPos];
                }

                if (cPos < 0) {
                    cPos = 0;
                    c = 0;
                } else {
                    c = matrix[cPos][x];
                }


                if (!a) {
                    continue;
                    // cell is empty - find next cell
                }

                if (!b && !c) {
                    startLabel++;
                    matrix[y][x] = startLabel;
                    setIsland(y, x, startLabel);
                } else if (b && !c) {
                    matrix[y][x] = b;
                    setIsland(y, x, b);
                } else if (!b && c) {
                    matrix[y][x] = c;
                    setIsland(y, x, c);
                } else if (b && c) {
                    if (b == c) {
                        matrix[y][x] = b;
                        setIsland(y, x, b);
                    } else {
                        matrix[y][x] = b;
                        setIsland(y, x, b);
                        islandMerge(c, b);
                    }
                }

            }

        }

        //console.log(matrix);
        //drawMatrix(matrix);
        /*        */

        console.log(islands.size());
    }

    function drawMatrix(matrix) {
        var colors = {0: 'ffffff'};
        var $table = $('<table></table>');
        var xSize = matrix.length,
                ySize = matrix[0].length
                ;
        console.log(matrix[0]);
        for (var x = 0; x < xSize; x++) {
            var $tr = $('<tr></tr>');
            $table.append($tr);

            for (var y = 0; y < ySize; y++) {
                var val = matrix[x][y];
                if (!colors[val]) {
                    colors[val] = (0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
                }
                var backgroundColor = colors[val];
                $tr.append('<td style="background-color: #'+backgroundColor+';">'+val+'</td>');
            }

        }
        console.log(colors);
        $('body').append('<hr>');
        $('body').append($table);

    }


</script>