Working version.

index.html

@@ -7,6 +7,7 @@
         <script src="js/vendor/load-image/load-image.all.min.js"></script>
         <script src="js/vendor/plotly/plotly-latest.min.js"></script>
         <script src="js/vendor/panzoom/panzoom.js"></script>
+        <script src="js/vendor/moment/moment.min.js"></script>
         <script src="js/xword.js"></script>
         <style>
             canvas {
@@ -54,6 +55,9 @@
         <div>
             <canvas id="output"></canvas>
         </div>
+        <div>
+            <a id="download" href="#" download="crossword.png">Download</a>
+        </div>
         <div id="graph"></div>
         <script>
             'use strict';
@@ -61,6 +65,8 @@
             let sourceImage = document.getElementById("sourceImage");
             let sourceImageParent = sourceImage.parentElement;
             let fileInput = document.getElementById("fileInput");
+            let output = document.getElementById('output');
+            let downloadLink = document.getElementById('download');
 
             let isSquare = true;
 
@@ -75,13 +81,12 @@
             let lineDetectorElementSize = 51;
 
             let samplingBlockSizeRatio = 0.25;
-            let samplingThresholdQuantile = 0.3;
-            let samplingThreshold = null;
 
             let gridLineThickness = 4;
             let gridSquareInternalSize = 64;
             let gridMarginSize = 20;
 
+            let src = null;
             let img = null;
             let zoomCallback = null;
 
@@ -107,6 +112,11 @@
                             let imageScale = sourceImageParent.offsetWidth / imageWidth;
                             sourceImageParent.style.height = Math.round(imageHeight * imageScale) + 'px';
 
+                            if (src != null) {
+                                src.delete();
+                                src = null;
+                            }
+
                             if (img != null) {
                                 img.delete();
                                 img = null;
@@ -177,17 +187,36 @@
                             }
 
                             function recalculate() {
-                                let square = extractSquare(img, getNewCorners());
+                                let numRows;
+                                let numCols;
+                                let corners = getNewCorners();
+                                let square = extractSquare(img, corners);
                                 try {
-                                    let numRows = getLineFrequency(square, lineDetectorElementSize, 1);
-                                    let numCols = getLineFrequency(square, lineDetectorElementSize, 0);
+                                    numRows = getLineFrequency(square, lineDetectorElementSize, 1);
+                                    numCols = getLineFrequency(square, lineDetectorElementSize, 0);
                                     if (isSquare && (numRows !== numCols)) {
                                         console.log("WARNING: crossword is not square");
                                     }
-                                    cv.imshow('output', square);
                                 } finally {
                                     square.delete();
                                 }
+
+                                let blockImg = extractSquare(src, corners);
+                                let grid;
+                                try {
+                                    let gridColours = extractGridColours(blockImg, numRows, numCols, samplingBlockSizeRatio);
+                                    let threshold = getGridColourThreshold(gridColours);
+                                    grid = gridColoursToBlocks(gridColours, numRows, numCols, threshold);
+                                } finally {
+                                    blockImg.delete();
+                                }
+
+                                if (grid.warning) {
+                                    console.log("WARNING: some blocks may be the wrong colour");
+                                }
+                                drawGrid(output, grid.blocks, numRows, numCols, gridLineThickness, gridSquareInternalSize, gridMarginSize);
+                                downloadLink.href = output.toDataURL("image/png");
+                                downloadLink.download = 'crossword_' + moment().format('YYYYMMDD_HHmmss') + '.png';
                             }
 
                             document.getElementById('recalculateButton').onclick = recalculate;
@@ -195,49 +224,45 @@
                                 redrawOverlay();
                             };
 
-                            let src = cv.imread(canvas);
-                            try {
-                                //removeColours(src, src, 48);
-                                //cv.imshow('output', src);
+                            src = cv.imread(canvas);
 
-                                cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);
+                            //removeColours(src, src, 48);
+                            //cv.imshow('output', src);
 
-                                img = new cv.Mat();
-                                preprocessImage(src, img, gaussianBlurSize, adaptiveThresholdBlockSize, adaptiveThresholdMeanAdjustment, numDilations);
-                                //cv.imshow('output', img);
-                                let corners;
-                                let biggest = findBiggestContour(img);
+                            cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);
+
+                            img = new cv.Mat();
+                            preprocessImage(src, img, gaussianBlurSize, adaptiveThresholdBlockSize, adaptiveThresholdMeanAdjustment, numDilations);
+                            //cv.imshow('output', img);
+                            let corners;
+                            let biggest = findBiggestContour(img);
+                            try {
+                                let eroded = erodeContour(img.size(), biggest, contourErosionKernelSize, contourErosionIterations);
                                 try {
-                                    let eroded = erodeContour(img.size(), biggest, contourErosionKernelSize, contourErosionIterations);
-                                    try {
-                                        corners = getContourCorners(img.size(), eroded);
-                                    } finally {
-                                        eroded.delete();
-                                    }
+                                    corners = getContourCorners(img.size(), eroded);
                                 } finally {
-                                    biggest.delete();
+                                    eroded.delete();
                                 }
+                            } finally {
+                                biggest.delete();
+                            }
 
-                                corners.forEach(function(corner) {
-                                    let handle = document.createElement('div');
-                                    handle.className = 'handle';
-                                    handle.dataset.left = corner.x;
-                                    handle.dataset.top = corner.y;
-                                    handle.style.left = handle.dataset.left + 'px';
-                                    handle.style.top = handle.dataset.top + 'px';
-                                    sourceImage.appendChild(handle);
-                                    interact(handle).draggable({
-                                        onmove: dragMoveListener
-                                    });
-                                    handles.push(handle);
+                            corners.forEach(function(corner) {
+                                let handle = document.createElement('div');
+                                handle.className = 'handle';
+                                handle.dataset.left = corner.x;
+                                handle.dataset.top = corner.y;
+                                handle.style.left = handle.dataset.left + 'px';
+                                handle.style.top = handle.dataset.top + 'px';
+                                sourceImage.appendChild(handle);
+                                interact(handle).draggable({
+                                    onmove: dragMoveListener
                                 });
+                                handles.push(handle);
+                            });
 
-                                redrawOverlay();
-                                recalculate();
-
-                            } finally {
-                                src.delete();
-                            }
+                            redrawOverlay();
+                            recalculate();
                         },
                         {
                             orientation: true

js/xword.js

@@ -253,3 +253,109 @@ function getLineFrequency(img, lineDetectorElementSize, axis) {
         fft.delete();
     }
 }
+
+function extractGridColours(img, numRows, numCols, samplingBlockSizeRatio) {
+    let imageSize = img.size();
+    let rowOffset = Math.floor(imageSize.height * samplingBlockSizeRatio / numRows / 2);
+    let rowHeight = 2 * rowOffset + 1;
+    let colOffset = Math.floor(imageSize.width * samplingBlockSizeRatio / numCols / 2);
+    let colWidth = 2 * colOffset + 1;
+    let gridColours = [];
+    for (let row = 0; row < numRows; row++) {
+        let line = [];
+        let y = Math.floor((row + 0.5) / numRows * imageSize.height) - rowOffset;
+        for (let col = 0; col < numCols; col++) {
+            let x = Math.floor((col + 0.5) / numCols * imageSize.width) - colOffset;
+            let roi = img.roi(new cv.Rect(x, y, colWidth, rowHeight));
+            try {
+                line.push(cv.mean(roi)[0]);
+            } finally {
+                roi.delete();
+            }
+        }
+        gridColours.push(line);
+    }
+    return gridColours;
+}
+
+function getGridColourThreshold(gridColours) {
+    let colours = gridColours.reduce(function(acc, x) { return acc.concat(x); }, []).sort(function (a, b) { return a - b; });
+    let deltaMax = 0;
+    let iMax;
+    for (let i = 0; i < colours.length; i++) {
+        let delta = colours[i] - colours[i - 1];
+        if (delta > deltaMax) {
+            deltaMax = delta;
+            iMax = i;
+        }
+    }
+    return (colours[iMax] + colours[iMax - 1]) / 2;
+}
+
+function gridColoursToBlocks(gridColours, numRows, numCols, samplingThreshold) {
+    let blocks = JSON.parse(JSON.stringify(gridColours));
+    let warning = false;
+    let midpoint = Math.floor(numRows / 2) + (numRows % 2 > 0 ? 1 : 0);
+    for (let row = 0; row < midpoint; row++) {
+        for (let col = 0; col < numCols; col++) {
+            // If there is an odd number of rows then row and row2 will point to
+            // the same row when we reach the middle. Doesn't seem worth adding a
+            // special case.
+            let row2 = numRows - row - 1;
+            let col2 = numCols - col - 1;
+            let delta1 = gridColours[row][col] - samplingThreshold;
+            let delta2 = gridColours[row2][col2] - samplingThreshold;
+            let filled;
+            if ((delta1 > 0) && (delta2 > 0)) {
+                filled = false;
+            } else if ((delta1 < 0) && (delta2 < 0)) {
+                filled = true;
+            } else {
+                warning = true;
+                if (Math.abs(delta1) > Math.abs(delta2)) {
+                    filled = delta1 < 0;
+                } else {
+                    filled = delta2 < 0;
+                }
+            }
+            blocks[row][col] = {filled: filled}
+            blocks[row2][col2] = {filled: filled}
+        }
+    }
+
+    let number = 1
+    for (let row = 0; row < numRows; row++) {
+        for (let col = 0; col < numCols; col++) {
+            if (! blocks[row][col].filled && (
+                (((col == 0) || blocks[row][col - 1].filled) && (col < numCols - 1) && ! blocks[row][col + 1].filled) ||
+                (((row == 0) || blocks[row - 1][col].filled) && (row < numRows - 1) && ! blocks[row + 1][col].filled)
+            )) {
+                blocks[row][col].number = number
+                number += 1
+            }
+        }
+    }
+
+    return {warning: warning, blocks: blocks};
+}
+
+function drawGrid(canvas, blocks, numRows, numCols, gridLineThickness, gridSquareSize, gridBorderSize) {
+    let step = gridSquareSize + gridLineThickness;
+    let gridHeight = numRows * step + gridLineThickness;
+    let gridWidth = numCols * step + gridLineThickness;
+    canvas.width = 2 * gridBorderSize + gridWidth;
+    canvas.height = 2 * gridBorderSize + gridHeight;
+    let context = canvas.getContext('2d');
+    context.fillStyle = 'black';
+    context.fillRect(gridBorderSize, gridBorderSize, gridWidth, gridHeight);
+    context.fillStyle = 'white';
+    for (let row = 0; row < numRows; row++) {
+        let y = row * step + gridLineThickness + gridBorderSize;
+        for (let col = 0; col < numCols; col++) {
+            if (! blocks[row][col].filled) {
+                let x = col * step + gridLineThickness + gridBorderSize;
+                context.fillRect(x, y, gridSquareSize, gridSquareSize);
+            }
+        }
+    }
+}