使用qrcode和canvas实现一个输入网址, 显示对应的二维码的功能, 手机扫描二维码可以打开对应网址

fury_123

于 2024-07-18 16:40:49 发布

阅读量249

点赞数 7

文章标签： arcgis

本文链接：https://blog.csdn.net/kuang_nu/article/details/140526897

版权

源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成二维码</title>
    <!-- 引入 QRCode 库 -->
    <script src="https://cdn.jsdelivr.net/npm/qrcode-generator/qrcode.min.js"></script>
</head>
<body>
    <h1>生成二维码</h1>
    <div>
        <label for="inputText">输入要转换为二维码的文本：</label>
        <input type="text" id="inputText">
        <button onclick="generateQRCode()">生成二维码</button>
    </div>
    <div id="qrcode"></div>

    <script>
        // 生成二维码的函数
        function generateQRCode() {
            var inputText = document.getElementById("inputText").value.trim();
            if (!inputText) {
                alert("请输入要转换为二维码的文本");
                return;
            }

            // 使用 qrcode-generator 库创建 QRCode 实例
            var typeNumber = 0; // 0 到 40，数字越大，二维码尺寸越大
            var errorCorrectionLevel = 'L'; // L, M, Q, H 中的一个
            var qr = qrcode(typeNumber, errorCorrectionLevel);
            qr.addData(inputText);
            qr.make();

            // 将生成的二维码显示在页面上
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            var size = qr.getModuleCount();
            var cellSize = 8; // 每个格子的大小为 8 像素

            canvas.width = canvas.height = size * cellSize;
            for (var i = 0; i < size; i++) {
                for (var j = 0; j < size; j++) {
                    ctx.fillStyle = qr.isDark(i, j) ? "#000000" : "#ffffff";
                    ctx.fillRect(i * cellSize, j * cellSize, cellSize, cellSize);
                }
            }

            // 在页面中显示二维码
            var qrcodeDiv = document.getElementById("qrcode");
            qrcodeDiv.innerHTML = '';
            qrcodeDiv.appendChild(canvas);
        }
    </script>
</body>
</html>