网页如何自动生成二维码代码？-网页设计-锦华智联科技

核心思路

网页本身无法“原生”生成二维码图片，它需要借助 JavaScript 库来完成这个任务，这个库会在浏览器中运行，将你提供的文本、URL 等信息，按照二维码的编码规则，动态地绘制成一个图片（通常是 Canvas 或 SVG 格式）。

（图片来源网络，侵删）

第一步：选择一个二维码生成库

有几个非常流行且好用的库,这里我推荐最常用的两个：

qrcode.js：最经典、使用最广泛的库，功能稳定,支持性好。
QRious：更轻量级，API 简单,依赖少。

推荐使用 qrcode.js，因为它功能更全面,社区支持更好。

第二步：基础实现（生成静态二维码）

这是最简单的方式，页面加载后,就在指定位置生成一个固定的二维码。

准备 HTML 文件

创建一个 index.html 文件，并引入 qrcode.js 库，你可以通过 CDN（内容分发网络）直接引入,这样最快最方便。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">二维码生成器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        #qrcode {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>我的二维码</h1>
    <!-- 这个 div 将用来放置生成的二维码 -->
    <div id="qrcode"></div>
    <!-- 1. 引入 qrcode.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
    <!-- 2. 编写自己的 JavaScript 代码 -->
    <script>
        // 等待页面加载完成后执行
        window.onload = function () {
            // 获取要放置二维码的 DOM 元素
            const qrcodeContainer = document.getElementById('qrcode');
            // 创建一个新的 QRCode 实例
            // new QRCode(element, options);
            new QRCode(qrcodeContainer, {
                text: "https://www.example.com", // 二维码包含的内容
                width: 256,                    // 二维码的宽度
                height: 256,                   // 二维码的高度
                colorDark: "#000000",         // 二维码深色块的颜色
                colorLight: "#ffffff",        // 二维码浅色块的背景色
                correctLevel: QRCode.CorrectLevel.H // 纠错级别，H 为最高
            });
        };
    </script>
</body>
</html>

代码解释：

引入库：<script src="..."></script> 从 CDN 加载了 qrcode.js。
创建容器：<div id="qrcode"></div> 是一个空的 div，QRCode 库会自动将生成的二维码图片（Canvas）插入到这个 div 中。
初始化：在 window.onload 中，我们通过 new QRCode() 来创建二维码实例。
- 第一个参数 qrcodeContainer 指定了二维码要被插入到的容器。
- 第二个参数是一个配置对象，text 是核心,定义了二维码的数据。

第三步：自动生成（动态输入）

这是更常见的需求，用户输入内容后,点击按钮或实时生成二维码。

修改 HTML

增加一个输入框和一个按钮。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">动态二维码生成器</title>
    <style>
        body { font-family: sans-serif; text-align: center; padding: 20px; }
        #inputText { width: 300px; padding: 8px; margin-bottom: 10px; }
        #generateBtn { padding: 10px 20px; cursor: pointer; }
        #qrcode { margin-top: 20px; }
    </style>
</head>
<body>
    <h1>动态二维码生成器</h1>
    <input type="text" id="inputText" placeholder="请输入要生成二维码的内容，如网址或文本" value="https://www.google.com">
    <button id="generateBtn">生成二维码</button>
    <div id="qrcode"></div>
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
    <script>
        // 获取 DOM 元素
        const inputText = document.getElementById('inputText');
        const generateBtn = document.getElementById('generateBtn');
        const qrcodeContainer = document.getElementById('qrcode');
        // 初始化一个变量来存储 QRCode 实例，以便后续更新
        let qrcode = null;
        // 生成二维码的函数
        function generateQRCode() {
            const text = inputText.value.trim();
            if (!text) {
                alert('请输入内容！');
                return;
            }
            // 如果之前已经生成了二维码，先清除容器里的旧内容
            qrcodeContainer.innerHTML = ""; 
            // 创建新的 QRCode 实例
            qrcode = new QRCode(qrcodeContainer, {
                text: text,
                width: 256,
                height: 256,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });
        }
        // 为按钮添加点击事件监听器
        generateBtn.addEventListener('click', generateQRCode);
        // 可选：页面加载时生成一个默认二维码
        generateQRCode();
    </script>
</body>
</html>

关键改进：

输入框和按钮：增加了 input 和 button 元素。
事件监听：generateBtn.addEventListener('click', generateQRCode) 监听按钮的点击事件，点击时调用 generateQRCode 函数。
：generateQRCode 函数从 inputText.value 获取用户输入的值。
更新二维码：qrcodeContainer.innerHTML = "" 是一个关键步骤，它清除了上一次生成的二维码，确保每次生成都是新的，然后重新调用 new QRCode() 来生成新的。

第四步：高级用法（纠错级别、Logo 等）

纠错级别

二维码有四个纠错级别，从低到高为 L, M, Q, H，级别越高，二维码即使被部分遮挡或损坏，也越容易被正确扫描，默认是 M，通常推荐使用 H 以获得更好的鲁棒性。

new QRCode(qrcodeContainer, {
    text: "https://example.com",
    correctLevel: QRCode.CorrectLevel.H // 使用最高纠错级别
});

在二维码中间添加 Logo

这是一个很酷的功能，但需要一些额外的步骤，因为 qrcode.js 本身不直接支持,基本思路是：

先生成一个二维码（通常用 render: 'canvas'）。
创建一个 img 标签用于你的 Logo。
将 Logo 绘制到二维码 Canvas 的中心。

function generateQRWithLogo() {
    const text = "https://my-brand.com";
    const logoUrl = "path/to/your-logo.png"; // 替换成你的 Logo 路径
    // 清除旧的二维码
    qrcodeContainer.innerHTML = "";
    // 使用 canvas 模式生成二维码
    const canvas = document.createElement('canvas');
    qrcodeContainer.appendChild(canvas);
    const qr = new QRCode(canvas, {
        text: text,
        width: 256,
        height: 256,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
        render: 'canvas' // 指定使用 canvas 渲染
    });
    // 当二维码绘制完成后执行
    qr.make(function () {
        // 创建 Logo 图片
        const logo = new Image();
        logo.src = logoUrl;
        logo.onload = function() {
            const ctx = canvas.getContext('2d');
            const logoSize = 60; // Logo 的大小
            const logoX = (canvas.width - logoSize) / 2;
            const logoY = (canvas.height - logoSize) / 2;
            // 先绘制二维码
            ctx.drawImage(canvas, 0, 0);
            // 再绘制 Logo（为了覆盖在二维码上）
            ctx.drawImage(logo, logoX, logoY, logoSize, logoSize);
        };
    });
}

注意：添加 Logo 会遮挡部分二维码信息，因此必须使用高纠错级别（H）,否则可能无法被扫描。

需求	关键代码/方法
基础静态生成	`new QRCode(element, { text: "..." });`
动态生成	`input.value` 获取内容，`element.innerHTML = ""` 清除旧内容，再 `new QRCode(...)`
设置纠错级别	`correctLevel: QRCode.CorrectLevel.H`
添加 Logo	使用 `render: 'canvas'`，然后在二维码绘制完成后，用 Canvas API 绘制 Logo 图片。

现在你可以根据这些示例,轻松地将二维码生成功能集成到你的任何网页项目中。