网页实现二维码扫描和解析

最新推荐文章于 2024-05-13 23:20:15 发布

M FS

最新推荐文章于 2024-05-13 23:20:15 发布

阅读量2.6k

点赞数 8

文章标签： js javascript html 二维码 Java

本文链接：https://blog.csdn.net/qq_40561126/article/details/103823694

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在做一个B/S模式的超市管理系统时，想要实现用户的自助结账服务。这无疑需要使用扫码功能，在网上找了很多网页实现二维码扫描资料，但都没有能够很完整的实现。最后找到了一个博客给出了部分代码和重要的指导思想，但由于众多原因博主不能公布源代码，所以我就根据他给出的思想实现了扫码的整个过程。
大致思想分为三块：
1、调用系统摄像头将摄像头获取的视频流实时播放在video中。
html文本

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>scanQRcode</title>
    <script type="text/javascript" th:src="@{/asserts/js/jquery-2.2.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/asserts/js/reqrcode.js}"></script>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" hidden></canvas>
<video id="myVideo" height="100%" width="50%"></video>
</body>
</html>

将视频流放到video中

       /*
        * 将摄像头的拍摄内容实时播放在video
        * */
        $(document).ready(function () {
            navigator.mediaDevices.getUserMedia({
                video: true
            }).then(function (stream) {
                var v = document.getElementById("myVideo");
                //将视频流实时播放在video
                v.srcObject = stream;
                v.onloadedmetadata = function () {
                    v.play();
                }
                screenShot();
            });

        });

2、使用canvas将video中的视频截图。

       /*
        * 将视频内容进行截图然后依次为参数调用解析二维码的码函数
        * */
        function screenShot() {
            var myCanvas = document.getElementById('myCanvas'),
                video = document.getElementById('myVideo'),
                canvas = document.getElementById('myCanvas').getContext('2d');
                canvas.drawImage(video, 0, 0, 200, 200);
                var url = myCanvas.toDataURL("image/png");
                decode(url);
        }

3、使用reqrcode.js插件解析二维码，如果成功解析则返回解析结果；解析失败则再截图在解析，直到解析成功。

/*
        * 解析二维码，成功则传回后台，失败则再次截图进行解析
        * */
        function decode(url) {
            qrcode.decode(url);
            qrcode.callback = function (imgMsg) {
                if (imgMsg == 'error decoding QR Code') {
                    screenShot();
                } else {
                    $.ajax({
                        url: "/sms/buy/good",
                        type:"post",
                        data: JSON.stringify({id:imgMsg}),
                        contentType: "application/json;charset=UTF-8",
                        success: function (good) {
                            alert(good.name+"\n"+good.outPrice);
                        },
                        error: function(a,b){
                            alert(a+","+b);
                        }
                    });
                }
            }
        }

完整代码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>scanQRcode</title>
    <script type="text/javascript" th:src="@{/asserts/js/jquery-2.2.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/asserts/js/reqrcode.js}"></script>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    <script type="text/javascript">
        /*
        * 解析二维码，成功则传回后台，失败则再次截图进行解析
        * */
        function decode(url) {
            qrcode.decode(url);
            qrcode.callback = function (imgMsg) {
                if (imgMsg == 'error decoding QR Code') {
                    screenShot();
                } else {
                    $.ajax({
                        url: "/sms/buy/good",
                        type:"post",
                        data: JSON.stringify({id:imgMsg}),
                        contentType: "application/json;charset=UTF-8",
                        success: function (good) {
                            alert(good.name+"\n"+good.outPrice);
                        },
                        error: function(a,b){
                            alert(a+","+b);
                        }
                    });
                }
            }
        }
        /*
        * 将视频内容进行截图然后依次为参数调用解析二维码的码函数
        * */
        function screenShot() {
            var myCanvas = document.getElementById('myCanvas'),
                video = document.getElementById('myVideo'),
                canvas = document.getElementById('myCanvas').getContext('2d');
                canvas.drawImage(video, 0, 0, 200, 200);
                var url = myCanvas.toDataURL("image/png");
                decode(url);
        }

        /*
        * 将摄像头的拍摄内容实时播放在video
        * */
        $(document).ready(function () {
            navigator.mediaDevices.getUserMedia({
                video: true
            }).then(function (stream) {
                var v = document.getElementById("myVideo");
                //将视频流实时播放在video
                v.srcObject = stream;
                v.onloadedmetadata = function () {
                    v.play();
                }
                screenShot();
            });

        });


    </script>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" hidden></canvas>
<video id="myVideo" height="100%" width="50%"></video>
</body>
</html>

下载地址：完整代码加相关插件，即下即用

M FS

关注

8
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
6
评论
网页实现二维码扫描和解析

在做一个B/S模式的超市管理系统时，想要实现用户的自助结账服务。这无疑需要使用扫码功能，在网上找了很多网页实现二维码扫描资料，但都没有能够很完整的实现。最后找到了一个博客给出了部分代码和重要的指导思想，单由于众多原因博主不能公布源代码，所以我就根据他给出的思想实现了扫码的整个过程。...
复制链接

扫一扫