andrew
/
xwordjs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
							<!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/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 id="graph"></div>
        <script>
            'use strict';

            let sourceImage = document.getElementById("sourceImage");
            let sourceImageParent = sourceImage.parentElement;
            let fileInput = document.getElementById("fileInput");

            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 samplingThresholdQuantile = 0.3;
            let samplingThreshold = null;

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

            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 (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 square = extractSquare(img, getNewCorners());
                                try {
                                    let numRows = getLineFrequency(square, lineDetectorElementSize, 1);
                                    let numCols = getLineFrequency(square, lineDetectorElementSize, 0);
                                    if (isSquare && (numRows !== numCols)) {
                                        console.log("WARNING: crossword is not square");
                                    }
                                    cv.imshow('output', square);
                                } finally {
                                    square.delete();
                                }
                            }

                            document.getElementById('recalculateButton').onclick = recalculate;
                            zoomCallback = function(event) {
                                redrawOverlay();
                            };

                            let src = cv.imread(canvas);
                            try {
                                //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();

                            } finally {
                                src.delete();
                            }
                        },
                        {
                            orientation: true
                        }
                    );
                }
            };
        </script>
    </body>
</html>
<!--
vim:ts=4:sw=4:expandtab
-->