PHP 生成帶 Logo 二維碼完整方案：後端與前端雙軌實作

PHP 二維碼生成方案：phpqrcode 後端 vs qrcode.js 前端

本文詳細比較兩種主流二維碼生成方案：後端使用 phpqrcode、前端使用 qrcode.js，並提供完整實作代碼與架構選型建議。

方案一：phpqrcode 後端生成

核心實作流程

1. 生成基礎二維碼圖片
2. 上傳 Logo 至伺服器
3. 將 Logo 疊加至二維碼中心
4. 輸出最終合成圖片

完整代碼實作

<?php
require_once 'phpqrcode/phpqrcode.php';

$value = $url;                    // 二維碼內容
$errorCorrectionLevel = 'L';      // 容錯等級：L(7%) M(15%) Q(25%) H(30%)
$matrixPointSize = $size;         // 圖片大小（模組像素）

// 1. 生成無 Logo 二維碼
$qrPath = 'public_files/code/qrcode.png';
QRcode::png($value, $qrPath, $errorCorrectionLevel, $matrixPointSize, 2);

// 2. 疊加 Logo
$logoPath = $tar_path; // 上傳的 Logo 路徑
if ($logoPath !== FALSE) {
    $QR = imagecreatefromstring(file_get_contents($qrPath));
    $logo = imagecreatefromstring(file_get_contents($logoPath));
    
    $QR_width = imagesx($QR);
    $QR_height = imagesy($QR);
    $logo_width = imagesx($logo);
    $logo_height = imagesy($logo);
    
    // Logo 寬度佔二維碼 1/5，等比縮放
    $logo_qr_width = $QR_width / 5;
    $scale = $logo_width / $logo_qr_width;
    $logo_qr_height = $logo_height / $scale;
    
    // 置中座標
    $from_width = ($QR_width - $logo_qr_width) / 2;
    
    // 重採樣複製合成
    imagecopyresampled(
        $QR, $logo, 
        $from_width, $from_width, 
        0, 0, 
        $logo_qr_width, $logo_qr_height, 
        $logo_width, $logo_height
    );
    
    // 輸出最終圖片
    $name = time();
    $finalPath = 'public_files/code/' . $name . '.png';
    imagepng($QR, $finalPath);
    imagedestroy($QR);
    imagedestroy($logo);
}
?>

容錯等級選擇指南

建議：帶 Logo 時至少使用 Q 等級，確保掃描成功率。

方案二：qrcode.js 前端生成

核心優勢

• 零伺服器負擔：純前端運算，不佔用後端 CPU/記憶體
• 無儲存壓力：不產生實體圖片檔案，無需清理機制
• 即時互動：使用者可即時調整參數、預覽效果
• 隱私友善：敏感資料不上傳伺服器

基礎實作

<div id="code_img"></div>
<img id="image" style="display:none;" />
<input type="file" id="file_input" accept="image/*" />

<script src="jquery.min.js"></script>
<script src="qrcode.js"></script>
<script>
var size = 200; // 二維碼尺寸
var length = size * 80;
length = parseInt(length);

$("#code_img").qrcode({
    render: "canvas",        // canvas 模式效能優於 table
    text: "https://example.com", // 內容
    width: length,
    height: length,
    background: "#ffffff",
    foreground: "#000000"
});
</script>

Logo 疊加實作（Base64 方式）

// 讀取本地圖片轉 Base64
var input = document.getElementById("file_input");
if (typeof FileReader === 'undefined') {
    input.setAttribute('disabled', 'disabled');
} else {
    input.addEventListener('change', readFile, false);
}

function readFile() {
    var file = this.files[0];
    if (!/image\/\w+/.test(file.type)) {
        alert("請選擇圖片檔案！");
        return false;
    }
    var reader = new FileReader();
    reader.readAsDataURL(file); // 轉為 Base64 Data URL
    reader.onload = function(e) {
        $('#image').attr('src', this.result);
        regenerateQR(); // 重新生成含 Logo 的二維碼
    };
}

function regenerateQR() {
    $("#code_img").empty().qrcode({
        render: "canvas",
        text: "https://example.com",
        width: length,
        height: length,
        background: "#ffffff",
        foreground: "#000000",
        src: $('#image').attr('src') // 關鍵：指定 Logo 來源
    });
}

方案深度比較

架構選型建議

常見問題與解決

1. Logo 遮蓋關鍵區域：提高容錯等級至 Q/H，縮小 Logo 佔比（建議 ≤ 1/5）
2. 中文內容掃描亂碼：確保網頁、PHP 檔案、資料庫皆為 UTF-8 編碼
3. 前端 Canvas 污染：跨域圖片導致 toDataURL() 失敗，需設定 crossOrigin="anonymous" 或代理圖片
4. 生成圖片模糊：提高 matrixPointSize 或 canvas 尺寸，匯出時指定高 DPI