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

二維碼產生工具

請輸入連結或文本，然後點擊生成二維碼。

工具簡介

本工具基於JavaScript 實現，使用者輸入連結或文字後，即時產生二維碼，並提供一鍵下載功能。二維碼自帶白色邊框，方便美觀，適用於列印和分享。

二維碼產生器原理

輸入解析：使用者輸入URL 或文本，前端取得輸入內容。
二維碼生成：使用 二維碼.js 產生二維碼，並渲染到 <canvas> 元素中。
邊框處理：在網頁上顯示二維碼時，透過CSS 填充 增加邊框。在下載時，使用 帆布 重新繪製白色邊框的二維碼，確保邊框不會遺失。
QR 圖碼下載：透過 畫布.toDataURL() 轉換為圖片格式，並自動觸發下載。

二維碼產生工具實作步驟

1️⃣ 引入 `二維碼.js` 庫

首先，在HTML 頁面中引入 二維碼.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️⃣ 處理二維碼下載

為了讓二維碼帶有白色邊框，需要在 帆布 畫布上重新繪製QR 圖碼:

				
					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;
}

透過以上步驟，就成功實現了一個簡單的二維碼產生工具。

免費在線二維碼生成工具，實現掃碼打開鏈接