asp.net MVC使用 jsQR 扫描二维码

最新推荐文章于 2024-04-12 08:56:51 发布

罗汉松驻扎的工作基地

最新推荐文章于 2024-04-12 08:56:51 发布

阅读量1.9k

点赞数 1

文章标签： mvc asp.net 后端

本文链接：https://blog.csdn.net/MFCdestoryer/article/details/122131236

版权

jsQR是一个js 插件 , 只用前台代码就可以识别出二维码的内容。

下面的例子是复制官网例子写出来的，官网是（有时候github上不了，下载靠运气）：

例子
https://cozmo.github.io/jsQR/
代码
https://github.com/cozmo/jsQR

运行的效果如图

以下是asp.net MVC项目，首先建立一个mvc项目，最好是用带有摄像头的笔记本电脑来开发测试，页面要调用摄像头。然后在homeControl里面加入一个视图

  public ActionResult ScamQR()
        {
            return View();
        }

并且在scripts文件夹里面加入刚刚下载下来的 jsQR.js 文件。

然后编辑ScamQR View （html 和 js脚步）

@*Scam page*@
@{
    Layout = null;
}

<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title>ScamQR</title>

    <script src="~/Scripts/jsQR.js"></script>

    <style>
        body {
            font-family: 'Ropa Sans', sans-serif;
            color: #333;
            max-width: 640px;
            margin: 0 auto;
            position: relative;
        }

        #githubLink {
            position: absolute;
            right: 0;
            top: 12px;
            color: #2D99FF;
        }

        h1 {
            margin: 10px 0;
            font-size: 40px;
        }

        #loadingMessage {
            text-align: center;
            padding: 40px;
            background-color: #eee;
        }

        #canvas {
            width: 100%;
        }

        #output {
            margin-top: 20px;
            background: #eee;
            padding: 10px;
            padding-bottom: 0;
        }

            #output div {
                padding-bottom: 10px;
                word-wrap: break-word;
            }

        #noQRFound {
            text-align: center;
        }
    </style>

</head>

<body>
    <div>
    </div>

    <h5>jsQR Scam</h5>
    <div id="loadingMessage">Unable to access video stream (please make sure you have a webcam enabled)</div>
    <canvas id="canvas" hidden></canvas>

    <div id="output" hidden>
        <div id="outputMessage">No QR code detected</div>
        <div hidden><b>Data:</b> <span id="outputData"></span></div>
    </div>

    <script type="text/javascript">
        var video = document.createElement("video");
        var canvasElement = document.getElementById("canvas");
        var canvas = canvasElement.getContext("2d");
        var loadingMessage = document.getElementById("loadingMessage");
        var outputContainer = document.getElementById("output");
        var outputMessage = document.getElementById("outputMessage");
        var outputData = document.getElementById("outputData");

        function drawLine(begin, end, color) {
            canvas.beginPath();
            canvas.moveTo(begin.x, begin.y);
            canvas.lineTo(end.x, end.y);
            canvas.lineWidth = 4;
            canvas.strokeStyle = color;
            canvas.stroke();
        }

        // Use facingMode: environment to attemt to get the front camera on phones
        navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function (stream) {
            video.srcObject = stream;
            video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
            video.play();
            requestAnimationFrame(tick);
        });

        function tick() {
            loadingMessage.innerText = "Loading video..."
            if (video.readyState === video.HAVE_ENOUGH_DATA) {
                loadingMessage.hidden = true;
                canvasElement.hidden = false;
                outputContainer.hidden = false;

                canvasElement.height = video.videoHeight;
                canvasElement.width = video.videoWidth;
                canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
                var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
                var code = jsQR(imageData.data, imageData.width, imageData.height, {
                    inversionAttempts: "dontInvert",
                });
                if (code) {
                    drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
                    drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
                    drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
                    drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
                    outputMessage.hidden = true;
                    outputData.parentElement.hidden = false;
                    outputData.innerText = code.data;
                    //my code (goto new page)
                    //window.location.href = "/home/editRes?qr=" + code.data;
                } else {
                    outputMessage.hidden = false;
                    outputData.parentElement.hidden = true;
                }
            }
            requestAnimationFrame(tick);
        }
    </script>

</body>

</html>

这样就做好了,只需前台代码，很方便好用。

备注：发布网站的时候，需要用https协议。由于手机打开摄像头需要安全连接，所以是https

罗汉松驻扎的工作基地

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
asp.net MVC使用 jsQR 扫描二维码

jsQR是一个js 插件 , 只用前台代码就可以识别出二维码的内容。下面的例子是复制官网例子写出来的，官网是（有时候github上不了，下载靠运气）：例子https://cozmo.github.io/jsQR/代码https://github.com/cozmo/jsQR运行的效果如图以下是asp.net MVC项目，首先建立一个mvc项目，最好是用带有摄像头的笔记本电脑来开发测试，页面要调用摄像头。然后在homeControl里面加入一个视图 public A.
复制链接

扫一扫