qrcode.js识别二维码

基础概念

二维码（QR Code） 是一种矩阵式条码（或称二维条码），由黑白色块组成，可以通过图像输入设备或光电扫描设备自动识读以实现信息自动处理。二维码比传统的条形码能存储更多的信息，并且可以表示多种类型的数据，如数字、字母、汉字、图片等。

qrcode.js 是一个用于生成和识别二维码的JavaScript库。它允许在网页上动态生成二维码，并且可以通过摄像头实时识别二维码。

优势

易于使用：qrcode.js 提供了简单的API，可以轻松地在网页中集成二维码生成和识别功能。
跨平台：由于是基于JavaScript，可以在任何支持HTML5的浏览器上运行。
灵活性：可以自定义二维码的大小、颜色、纠错级别等参数。
实时识别：结合HTML5的getUserMedia API，可以实现通过摄像头实时扫描二维码。

类型

生成二维码：将文本或其他数据编码成二维码图像。
识别二维码：通过摄像头捕捉二维码图像并解码其中的信息。

应用场景

移动支付：用户通过扫描商家展示的二维码完成支付。
信息分享：快速分享网址、名片、电子票据等信息。
身份验证：通过扫描二维码进行身份认证或登录。
产品追溯：在商品包装上印制二维码，消费者扫码可查看产品详情和生产流程。

示例代码

生成二维码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生成二维码</title>
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
</head>
<body>
    <div id="qrcode"></div>
    <script>
        var qrcode = new QRCode(document.getElementById("qrcode"), {
            text: "https://www.example.com",
            width: 128,
            height: 128,
            colorDark : "#000000",
            colorLight : "#ffffff",
            correctLevel : QRCode.CorrectLevel.H
        });
    </script>
</body>
</html>

识别二维码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>识别二维码</title>
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
</head>
<body>
    <video id="preview" width="300" height="200" autoplay></video>
    <div id="output">识别结果: </div>
    <script>
        var video = document.getElementById('preview');
        var output = document.getElementById('output');

        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
                video.srcObject = stream;
                video.play();
                requestAnimationFrame(tick);
            });
        }

        function tick() {
            if (video.readyState === video.HAVE_ENOUGH_DATA) {
                var canvas = document.createElement('canvas');
                canvas.width = video.width;
                canvas.height = video.height;
                var context = canvas.getContext('2d');
                context.drawImage(video, 0, 0, canvas.width, canvas.height);

                try {
                    var dataURL = canvas.toDataURL('image/png');
                    var qrcode = new QRCode(output, {
                        text: "",
                        width: 128,
                        height: 128,
                        colorDark : "#000000",
                        colorLight : "#ffffff",
                        correctLevel : QRCode.CorrectLevel.H
                    });
                    qrcode.makeCode(dataURL);
                } catch (e) {
                    output.innerText = "识别失败: " + e;
                }
            }
            requestAnimationFrame(tick);
        }
    </script>
</body>
</html>