Question

我一直在尝试用HTML和JavaScript编写一个不需要网络摄像头或扫描仪的QR码解码器。您只需单击某些按钮（625次填充25x25代码）即可输入QR码。这是代码：

<!DOCTYPE html>
<html>
<head>
    <title>QR Hacker</title>
</head>
<body>
    <p>Note that this only supports 25x25 QR Codes. May take few clicks to fill certain squares.
    Skipped boxes are colored red. All 625 squares should end up being black and/or red before decoding.</p>
    <canvas id="canv" width="200" height="200" style="border:1px solid #000000"></canvas>
    <script>
        var i;
        var a = document.getElementById("canv");
        var b = a.getContext("2d");
        b.translate(0.5,0.5);
        b.lineWidth = 1;
        //////////GRID SETUP//////////
        for (var y = 0; y <= 200; y += 8) {
            strokeLine(b, y);
        }

        function strokeLine(ctx, y) {
            ctx.beginPath();
            ctx.moveTo(0, y);
            ctx.lineTo(300, y);
            ctx.stroke();
        }

        for (var x = 0; x <= 200; x += 8) {
            strokxLine(b, x);
        }

        function strokxLine(ctx, x) {
            ctx.beginPath();
            ctx.moveTo(x, 0);
            ctx.lineTo(x, 300);
            ctx.stroke();
        }
        /////////////DRAW//////////////
        var r = 0;
        var s = 0;
        var i = 0;
        var j = 0;
        function createArray(length) {
            var arr = new Array(length || 0),
            i = length;
            if (arguments.length > 1) {
                var args = Array.prototype.slice.call(arguments, 1);
                while(i--) arr[length-1 - i] = createArray.apply(this, args);
            }

            return arr;
        }
        var data = createArray(25,25);
        function fill(d,e)
        {
            if(d<208)
            {
                b.fillRect(d,e,8,8);
                r += 8;
            }
            if(r>200)
            {
                d = 0;
                e += 8;
                r = 0;
                s += 8;
            }
        };
        function skip()
        {
            b.fillStyle="rgb(255,0,0)";
            fill(r,s);
            b.fillStyle="#000000";
        };
    </script>
    <button type="button" onclick="fill(r,s);">Fill in next square</button>
    <button type="button" onclick="skip();">Skip next square</button>
    <button type="button" onclick="decode();">Decode!</button>
</body>
</html>

所以我现在要做的是创建一个函数decode()，它读取屏幕上的颜色并将一些二进制数据转储到一个数组中（黑色方块= 1，红色方块= 0）。它将被转储成25 * 25的数组。我已尝试在getImageData()上使用b=a.getContext()方法，但我无法弄清楚如何从像素颜色的字节计算范围（0,25）中的x和y坐标for循环。请帮忙！ ; - ;

HTML / JS QR解码器

0 个答案: