免费在线二维码生成工具，实现扫码打开链接

二维码生成工具

请输入链接或文本，然后点击生成二维码。

工具简介

本工具基于 JavaScript 实现，用户输入链接或文本后，即时生成二维码，并提供一键下载功能。二维码自带白色边框，方便美观，适用于打印和分享。

二维码生成器原理

输入解析：用户输入 URL 或文本，前端获取输入内容。
二维码生成：使用 qrcode.js 生成二维码，并渲染到 <canvas> 元素中。
边框处理：在网页上显示二维码时，通过 CSS padding 增加边框。在下载时，使用 canvas 重新绘制带白色边框的二维码，确保边框不会丢失。
二维码下载：通过 canvas.toDataURL() 转换为图片格式，并自动触发下载。

二维码生成工具实现步骤

1️⃣ 引入 `qrcode.js` 库

首先，在 HTML 页面中引入 qrcode.js，这是一个轻量级的二维码生成库：

				
					<script src="https://website-custom.com/wp-content/cache/flying-press/qrcode.min.js" type="pmdelayedscript" data-cfasync="false" data-no-optimize="1" data-no-defer="1" data-no-minify="1" data-origin-src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

2️⃣ 创建输入框和按钮

在 HTML 页面添加输入框、二维码显示区域和按钮：

				
					<div id="qrcode-tool">
    <input type="text" id="qr-input" placeholder="输入链接或文本">
    <button id="generateBtn">生成二维码</button>
    <div class="qrcode-wrapper"><div id="qrcode"></div></div>
    <button id="downloadBtn" style="display: none;">下载二维码</button>
</div>

3️⃣ 生成二维码

在 JavaScript 中，监听按钮点击事件，生成二维码：

				
					document.getElementById("generateBtn").addEventListener("click", function () {
    let input = document.getElementById("qr-input").value;
    let qrContainer = document.getElementById("qrcode");
    
    if (!input) {
        alert("请输入内容");
        return;
    }

    // 清空已有二维码
    qrContainer.innerHTML = "";

    // 生成二维码
    new QRCode(qrContainer, {
        text: input,
        width: 200,
        height: 200
    });

    // 显示下载按钮
    document.getElementById("downloadBtn").style.display = "inline-block";
});

4️⃣ 处理二维码下载

为了让二维码带有白色边框，需要在 canvas 画布上重新绘制二维码：

				
					document.getElementById("downloadBtn").addEventListener("click", function () {
    let qrCanvas = document.querySelector("#qrcode canvas");
    
    if (!qrCanvas) {
        alert("请先生成二维码！");
        return;
    }

    let borderSize = 20; // 设置边框大小
    let size = qrCanvas.width + 2 * borderSize;

    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");

    // 设置新画布尺寸
    canvas.width = size;
    canvas.height = size;

    // 填充白色背景（边框）
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, size, size);

    // 在中心绘制二维码
    ctx.drawImage(qrCanvas, borderSize, borderSize);

    // 触发下载
    let link = document.createElement("a");
    link.href = canvas.toDataURL("image/png");
    link.download = "qrcode.png";
    link.click();
});

5️⃣ 美化二维码样式

通过使用CSS美化二维码的显示效果：

				
					#qrcode-tool {
    text-align: center;
    margin-top: 20px;
}

.qrcode-wrapper {
    display: inline-block;
    padding: 15px;
    background: #fff;
    border-radius: 10px;
    margin-top: 10px;
}

#qr-input {
    width: 250px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 10px;
}

button {
    padding: 8px 12px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background: #0056b3;
}

通过以上步骤，就成功实现了一个简单的二维码生成工具。