imagemanip.js

var processor = Object();

processor.doLoad = function doLoad() {
    this.sourceimage = document.getElementById('myimage');
    this.canvas1 = document.getElementById('canvas1');
    this.ctx1 = this.canvas1.getContext('2d');
    this.ctx1.drawImage(this.sourceimage, 0 ,0);
    this.sourceimageCtx = this.ctx1;
    this.canvas2 = document.getElementById('canvas2');
    this.ctx2 = this.canvas2.getContext('2d');
    let self = this;





let frame = this.sourceimageCtx.getImageData(0, 0, this.canvas1.width, this.canvas1.height);//this.ctx1.getImageData(0, 0, this.width, this.height);
let width = this.canvas1.width;
frame.width = this.canvas1.width;
let height = this.canvas1.height;
let l = frame.data.length / 4;
let R = 0;
let G = 1;
let B = 2;
let A = 3;

//Filter the source image to remove all the non-text taht we are not interested in.
for (let i = 0; i < l; i++) {
    let r = frame.data[i * 4 + 0];
    let g = frame.data[i * 4 + 1];
    let b = frame.data[i * 4 + 2];
    let alpha = frame.data[i * 4 + 3];
    x = i % width;
    y = (i - x) / width;
    if (r > 22 && r <= 24 && g > 20 && g <= 22 && b > 20 && b <= 25) {

        r = 0;
        g = 0;
        b = 0;
        alpha = 255;

    } else {
        r = 255;
        g = 255;
        b = 255;
        alpha = 255;
    }
        frame.data[i * 4 + R] = r;
        frame.data[i * 4 + G] = g;
        frame.data[i * 4 + B] = b;
        frame.data[i * 4 + A] = alpha;
}
    this.sourceimageCtx.putImageData(frame, 0, 0);

    tollerance = 32; //This is the cut off tollarance for the number of non-empty cells
                     //on a row or column for the row or column to be flagged as significant. the higher the value the tighter the fit has to be.
                     //It may be a good idea to start out quite high and see what matches then drop it down too see if there's a broader fit.

    // Scan the image with a grid matrix of ever decreasing box width. Ech itteration there are twice as many element in the matrix.
    theGrids = [];
    theGrids.length = 40;
    theColRowTotals = [];
    theColRowTotals.length = 40;
    grid = 0;
    for(gridSpacing = 2;
        gridSpacing <= 512;
        gridSpacing = gridSpacing * 2)
    {
        theGrids[grid] = [];
        theGrids[grid].length = gridSpacing * gridSpacing;
        theColRowTotals[grid] = Object();
        theColRowTotals[grid].colTotals = [];
        theColRowTotals[grid].colTotals.length = gridSpacing;
        theColRowTotals[grid].rowTotals = [];
        theColRowTotals[grid].rowTotals.length = gridSpacing;
        let theGrid = theGrids[grid];
        py=0;
        for(gy = 0; gy < height; gy = gy + (height/ gridSpacing))
        {
            px=0;
            igy = Math.floor(gy);
            iww = Math.floor(height/ gridSpacing);
            for(gx = 0; gx < width; gx = gx + (width/ gridSpacing))
            {

                igx = Math.floor(gx);
                iwh = Math.floor(width/ gridSpacing);

                //Test to see if there is anything inside the matrix element

                hasSpot = 0;
                if(grid > 0)
                {
                    // If the matrix element contained nothing on the pervious run then dopn't bother checking it again this time
                    if(theGrids[grid - 1][Math.floor(px/2) + Math.floor(py/2) * gridSpacing /2])
                        hasSpot = testSquare(frame, igx,  igy,  iwh,  iww)
                } else {
                    hasSpot = testSquare(frame, igx,  igy,  iwh,  iww)
                }
                theGrid[px + py * gridSpacing] = hasSpot;

                //Draw a little dot on the frame image so we know we have done something
                if(hasSpot == 1)
                {
                    frame.data[(igx + Math.floor((width/ gridSpacing)/ 2) + (igy +Math.floor((height/ gridSpacing)/ 2))  * frame.width) * 4 + R] = 255;
                    frame.data[(igx + Math.floor((width/ gridSpacing)/ 2) +  (igy +Math.floor((height/ gridSpacing)/ 2)) * frame.width) * 4 + G] = 0;
                    frame.data[(igx + Math.floor((width/ gridSpacing)/ 2) +  (igy +Math.floor((height/ gridSpacing)/ 2)) * frame.width) * 4 + B] = 0;
                    frame.data[(igx + Math.floor((width/ gridSpacing)/ 2) +  (igy +Math.floor((height/ gridSpacing)/ 2)) * frame.width) * 4 + A] = 255;
                }
                px++;
            }
            py++;
        }
        //Now that we've identified all the matrix cells that contain something in this itteration
        //Count how many cellsd contained sopmething bhy each row and column
        for(col = 0; col < gridSpacing; col++)
        {
            if(grid > 0 && col % 2 === 0)
            {
                // The overlapping column on the previous grid was below the threashold, so set this one not to double count
                if(theColRowTotals[grid - 1].colTotals[col / 2] <  Math.floor(gridSpacing / tollerance) || theColRowTotals[grid - 1].colTotals[col / 2]=== 9999999999)
                {
                    theColRowTotals[grid].colTotals[col] = 9999999999;
                    col++;
                    theColRowTotals[grid].colTotals[col] = 9999999999;
                    continue;
                }
            }
            colTotal = 0;
            for(row = 0; row < gridSpacing; row ++)
                colTotal += theGrid[row + col * gridSpacing]
            theColRowTotals[grid].colTotals[col] = colTotal;
        }

        for(row = 0; row < gridSpacing; row++)
        {
            if(grid > 0 && row % 2 === 0)
            {
                // The overlapping row on the previous grid was below the threashold, so set this one not to double count
                if(theColRowTotals[grid - 1].rowTotals[row / 2] < Math.floor(gridSpacing / tollerance) || theColRowTotals[grid - 1].rowTotals[row / 2]=== 9999999999)
                {
                    theColRowTotals[grid].rowTotals[row] = 9999999999;
                    row++;
                    theColRowTotals[grid].rowTotals[row] = 9999999999;
                    continue;
                }
            }
            rowTotal = 0;
            for(col = 0; col < gridSpacing; col ++)
                rowTotal += theGrid[row + col * gridSpacing]
            theColRowTotals[grid].rowTotals[row] = rowTotal;
        }
        //move ontio the next grid (we could bail out if we've had enough rows/cols within tollerance )
        grid = grid + 1;
    }

    grids = grid;
    matchedRowCols = [];
    //finally, itterate over all the row col totals and identify those that are within tollarance and add them tyo a list of candidate row and columns for layout fitting
    //In theory it's possible to check the row and column couints against the tollarance and add them to the list when they are calculated
    //Then if we get enough entries early we can bail out of the grid matrix test early
    //That would also mean there's no need to go over them here.. I may fix this bug.
    for(grid = 0; grid < grids; grid++)
    {
        let theColRowTotal = theColRowTotals[grid];
        colRowFitcount = 0;
        entries = theColRowTotal.rowTotals.length;
        for(entry = 0; entry < entries; entry++)
        {
            if(theColRowTotal.colTotals[entry] < Math.floor(entries / tollerance))
            {
                matchedRowCols.length = matchedRowCols.length + 1;
                matchedRowCols[matchedRowCols.length - 1] = Object();
                let matchedRowCol = matchedRowCols[matchedRowCols.length - 1];
                matchedRowCol.grid = grid;
                matchedRowCol.entry = entry;
                matchedRowCol.rowcol = "col";
                matchedRowCol.count = theColRowTotal.colTotals[entry];
                matchedRowCol.entries = entries;
                matchedRowCols[matchedRowCols.length - 1] = matchedRowCol;
            }
            if(theColRowTotal.rowTotals[entry] < Math.floor(entries / tollerance))
            {
                matchedRowCols.length = matchedRowCols.length + 1;
                matchedRowCols[matchedRowCols.length - 1] = Object();
                let matchedRowCol = matchedRowCols[matchedRowCols.length - 1];
                matchedRowCol.grid = grid;
                matchedRowCol.entry = entry;
                matchedRowCol.rowcol = "row";
                matchedRowCol.count = theColRowTotal.rowTotals[entry];
                matchedRowCol.entries = entries;
                matchedRowCols[matchedRowCols.length - 1] = matchedRowCol;
            }
        }
        if(matchedRowCols.length > 40)
        {
            break;
        }
    }

    this.ctx2.putImageData(frame, 0, 0);
};

function testSquare(frame, left, top, width, height)
{
    let R = 0;
    let G = 1;
    let B = 2;
    let A = 3;
    for(x =0;x<width;x++){
        for(y = 0; y<height;y++)
        {
            if(getPixel(left + x, top + y, frame)[R] === 0)
                return 1;
        }
    }
    return 0;
}

function getPixel(x, y, frame)
{

    return [frame.data[(x + y * frame.width) * 4],
    frame.data[(x + y * frame.width) * 4 + 1],
    frame.data[(x + y * frame.width) * 4 + 2],
    frame.data[(x + y * frame.width) * 4 + 3]]
}