打造專屬極簡美學：用 HTML5 與 JavaScript 實作「無廣告 QR Code 產生器」

發布日期： 2026年6月29日
難度： 初級
所需時間： 約 20-30 分鐘

前言

在平常的生活或工作行銷中，我們經常需要將網址、Wi-Fi 密碼、聯絡人資訊或純文字轉換為 QR Code 條碼。雖然網路上有許多免費的產生器，但絕大多數都充斥著繁雜的廣告、惱人的註冊提示，甚至是可能追蹤隱私的重新導向連結。

這篇文章將帶你從零開始，使用 HTML5、Vanilla CSS 以及 JavaScript，配合輕量級開源函式庫，實作一個擁有「毛玻璃質感 (Glassmorphism)」且完全無廣告、秒速生成、支援一鍵下載與複製的個人專屬 QR Code 產生器！

技術棧選用

為了讓網頁加載速度最快，並且方便部署，我們不使用複雜的框架，直接採用最純粹的網頁核心技術：

HTML5：建構左側設定面板與右側即時預覽的兩欄式版面。
Vanilla CSS (CSS3)：設計深色漸層背景與現代感的毛玻璃卡片（Glassmorphism）。
JavaScript (ES6)：撰寫動態輸入綁定與範本切換邏輯。
Qrious (JS 函式庫)：一個基於 Canvas 的超輕量、無依賴 QR Code 生成庫（透過 CDN 載入）。
FontAwesome：為按鈕與輸入框提供精美的質感圖示。

第一步：規劃 HTML 介面結構

我們將網頁分為左右兩大區塊：左側為輸入與調整面板，包含選擇類型（網址、文字、Wi-Fi、電話、Email）、內容輸入框、顏色選擇器、尺寸滑動桿與容錯率設定；右側為即時預覽與產出面板，放置 Canvas 畫布與下載/複製按鈕。

<div class="app-container">
    <!-- 左側設定面板 -->
    <div class="card input-panel">
        <h2><i class="fa-solid fa-sliders"></i> 設定產出內容與參數</h2>
        <!-- 類型選擇與輸入控制項 -->
    </div>
    
    <!-- 右側預覽面板 -->
    <div class="card preview-panel">
        <h2><i class="fa-solid fa-circle-check"></i> 即時預覽與產出</h2>
        <div class="qr-output-container">
            <canvas id="qr-canvas"></canvas>
        </div>
        <!-- 下載與複製按鈕 -->
    </div>
</div>

第二步：打造質感毛玻璃效果 (CSS)

為了呈現 premium 的視覺感受，我們使用 CSS 自訂變數、徑向漸層與 backdrop-filter 屬性來實現現代感的毛玻璃（Glassmorphism）特效：

:root {
    --bg-gradient: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #0f0f1b 100%);
    --panel-bg: rgba(255, 255, 255, 0.03);
    --panel-border: rgba(255, 255, 255, 0.06);
    --primary: #8a3ab9;
    --secondary: #00f2fe;
}

body {
    background: var(--bg-gradient);
    min-height: 100vh;
}

.card {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

這段 CSS 能讓卡片看起來像浮動在深邃背景上的半透明發光玻璃，邊緣微光閃爍，十分美觀。

第三步：動態生成與範本邏輯 (JS)

我們透過 CDN 載入輕量級的 qrious.js，它會直接在 HTML5 的畫布上進行渲染，這使得後續的「一鍵下載為 PNG」或「複製到剪貼簿」功能變得極為簡單。

3-1. 初始化 QR Code 實例

const qr = new QRious({
    element: document.getElementById('qr-canvas'),
    value: 'https://stillbuilding.life',
    size: 250,
    padding: 10,
    level: 'H', // 高容錯率
    foreground: '#000000',
    background: '#ffffff'
});

3-2. 即時監聽與動態更新

我們監聽所有設定控制項的 input 事件，只要使用者一輸入網址、更換顏色、或者拖拉尺寸滑動桿，系統就會立刻呼叫 qr.set() 更新條碼，達到即時預覽的效果：

function generateQRCode() {
    qr.set({
        value: getQRDataValue(), // 根據所選類型（網址、WiFi、Email）組合出標準字串
        size: parseInt(sizeSlider.value),
        padding: parseInt(paddingSlider.value),
        level: errorLevel.value,
        foreground: colorForeground.value,
        background: colorBackground.value
    });
}

3-3. 實作 WiFi 快速連線協定

你知道嗎？掃描 QR Code 自動連線 WiFi 的背後，其實是有標準協定的！當使用者選擇 WiFi 類型時，JavaScript 會將輸入的 SSID 和密碼組合成以下標準字串：

// SSID 和密碼中如果有特殊符號，需做轉義
const ssid = wifiSSID.value.replace(/([\\;,:"])/g, '\\$1');
const pass = wifiPass.value.replace(/([\\;,:"])/g, '\\$1');
const crypt = wifiCrypt.value; // WPA 或 WEP

// 組合為標準 WiFi 連線字串格式
const wifiString = `WIFI:T:${crypt};S:${ssid};P:${pass};;`;

手機相機掃描到此格式的字串後，系統就會自動辨識並跳出連線提示，非常實用！

第四步：實作一鍵下載與複製

4-1. 下載為 PNG 圖片

因為 Qrious 將條碼繪製在上，我們可以直接轉換成 Data URL 並利用隱藏連結進行下載：

btnDownload.addEventListener('click', function() {
    const dataURL = qrCanvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.download = `qrcode_${Date.now()}.png`;
    link.href = dataURL;
    link.click();
});

4-2. 複製條碼至剪貼簿

利用現代瀏覽器的 navigator.clipboard API，我們可以將 Canvas 內容轉換為 Blob 對象，並寫入系統剪貼簿，讓使用者不用下載就能在其他軟體中直接貼上（Ctrl+V）：

btnCopy.addEventListener('click', function() {
    qrCanvas.toBlob(function(blob) {
        const item = new ClipboardItem({ 'image/png': blob });
        navigator.clipboard.write([item]);
        showToast('成功複製 QR Code 條碼圖片！');
    });
});

第五步：Nginx 部署與轉發

當寫好單一 HTML 檔案後，我們希望將它託管在已經架設好的網站伺服器下，例如 https://stillbuilding.life/qrcode/。

我們在伺服器的網頁根目錄建立 qrcode 資料夾，並放入 index.html：

mkdir -p /var/www/wordpress/qrcode
mv index.html /var/www/wordpress/qrcode/index.html
chown -R www-data:www-data /var/www/wordpress/qrcode

由於 Nginx 設定檔中配置了 try_files $uri $uri/ /index.php?$args;，當 Nginx 偵測到實體目錄與 index.html 檔案存在時，會直接以靜態網頁形式高速讀取並呈現，不會經過 PHP 處理，保證讀取速度低於 0.1 秒！

結語

透過簡單的 HTML5、Vanilla CSS 以及 Qrious 函式庫，我們成功打造出一個兼具美感與實用性的 QR Code 產生器。

❌ 拒絕廣告：乾淨無任何廣告干擾。
❌ 拒絕追蹤：資料純本地處理，隱私安全無虞。
⚡ 秒速加載：完全靜態網頁，極速響應。

擁有自己打造的實用小工具，不僅能學到前端資料綁定、WiFi 連線協定等實務經驗，還能讓自己的部落格網站更具專業性與功能性！

*歡迎前往我們的產生器頁面測試使用：(https://stillbuilding.life/qrcode/)*

前言