andrew
/
xwordjs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
							<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="js/vendor/interact/interact.min.js"></script>
        <script src="js/vendor/opencv/opencv.js"></script>
        <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 {
                width: 400px;
            }
            #sourceImageContainer {
                width: 400px;
                overflow: hidden;
            }
            #sourceImage {
                position: relative;
                width: min-content;
            }
            #sourceImage canvas {
                width: auto;
            }
            #sourceImage .overlay {
                position: absolute;
                left: 0;
                top: 0;
            }
            .handle {
                position: absolute;
                box-sizing: border-box;
                width: 301px;
                height: 301px;
                border-radius: 50%;
                border: 6px solid red;
                transform: translate(-50%, -50%);
            }
            #graph {
                width: 1000px;
                height: 800px;
            }
        </style>
    </head>
    <body>
        <div>
            <input type="file" id="fileInput">
        </div>
        <div id="sourceImageContainer">
            <div id="sourceImage"></div>
        </div>
        <button id="recalculateButton">Recalculate</button>
        <div>
            <canvas id="output"></canvas>
        </div>
        <div>
            <a id="download" href="#" download="crossword.png">Download</a>
        </div>
        <div id="graph"></div>
        <script>
            'use strict';

            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;

            let gaussianBlurSize = 11;
            let adaptiveThresholdBlockSize = 11;
            let adaptiveThresholdMeanAdjustment = 2;
            let numDilations = 1;

            let contourErosionKernelSize = 5;
            let contourErosionIterations = 5;

            let lineDetectorElementSize = 51;

            let samplingBlockSizeRatio = 0.25;

            let gridLineThickness = 4;
            let gridSquareInternalSize = 64;
            let gridMarginSize = 20;

            let src = null;
            let img = null;
            let zoomCallback = null;

            let zoomer = Panzoom(sourceImage, {
                excludeClass: 'handle'
            });
            sourceImage.addEventListener('panzoomzoom', function(event) {
                if (zoomCallback != null) zoomCallback(event);
            });
            
            sourceImageParent.addEventListener('wheel', function(event) {
                if (! event.shiftKey) return;
                zoomer.zoomWithWheel(event, {disablePan: true});
            });

            fileInput.onchange = function(e) {
                if (e.target.files.length > 0) {
                    loadImage(
                        e.target.files[0],
                        function(canvas) {
                            let imageWidth = canvas.width;
                            let imageHeight = canvas.height;
                            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;
                            }

                            while (sourceImage.firstChild) {
                                sourceImage.removeChild(sourceImage.firstChild);
                            }
                            sourceImage.appendChild(canvas);

                            zoomer.setOptions({
                                minScale: imageScale,
                                maxScale: 1
                            });
                            zoomer.zoomToPoint(imageScale, {clientX: sourceImageParent.offsetLeft, clientY: sourceImageParent.offsetTop});

                            let overlay = document.createElement('canvas');
                            overlay.className = 'overlay';
                            overlay.width = imageWidth;
                            overlay.height = imageHeight;
                            sourceImage.appendChild(overlay);

                            let context = overlay.getContext('2d');
                            context.globalAlpha = 0.6;
                            context.strokeStyle = 'red';

                            let handles = [];

                            function getNewCorners() {
                                let corners = [];
                                handles.forEach(function(handle) {
                                    corners.push(new cv.Point(
                                        parseFloat(handle.dataset.left),
                                        parseFloat(handle.dataset.top)
                                    ));
                                });
                                return corners;
                            }

                            function redrawOverlay() {
                                let corners = getNewCorners();
                                context.lineWidth = 1 / zoomer.getScale();
                                context.clearRect(0, 0, imageWidth, imageHeight);
                                context.beginPath();
                                let corner = corners[corners.length - 1];
                                context.moveTo(corner.x, corner.y);
                                corners.forEach(function(corner) {
                                    context.lineTo(corner.x, corner.y);
                                });
                                context.stroke();
                            }

                            function dragMoveListener(event) {
                                let target = event.target;
                                let newLeft = Math.min(
                                    imageWidth - 1,
                                    Math.max(0, parseFloat(target.dataset.left) + event.dx / zoomer.getScale())
                                );
                                let newTop = Math.min(
                                    imageHeight - 1,
                                    Math.max(0, parseFloat(target.dataset.top) + event.dy / zoomer.getScale())
                                );
                                target.dataset.left = newLeft;
                                target.dataset.top = newTop;
                                target.style.left = newLeft + 'px';
                                target.style.top = newTop + 'px';
                                redrawOverlay();
                            }

                            function recalculate() {
                                let numRows;
                                let numCols;
                                let corners = getNewCorners();
                                let square = extractSquare(img, corners);
                                try {
                                    numRows = getLineFrequency(square, lineDetectorElementSize, 1);
                                    numCols = getLineFrequency(square, lineDetectorElementSize, 0);
                                    if (isSquare && (numRows !== numCols)) {
                                        console.log("WARNING: crossword is not 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;
                            zoomCallback = function(event) {
                                redrawOverlay();
                            };

                            src = cv.imread(canvas);

                            //removeColours(src, src, 48);
                            //cv.imshow('output', src);

                            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 {
                                    corners = getContourCorners(img.size(), eroded);
                                } finally {
                                    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);
                            });

                            redrawOverlay();
                            recalculate();
                        },
                        {
                            orientation: true
                        }
                    );
                }
            };
        </script>
    </body>
</html>
<!--
vim:ts=4:sw=4:expandtab
-->