Java 生成 QR Code 完整教學：ZXing 基礎版、帶 Logo 進階版與 jQuery 前端方案

Java 生成 QR Code 完整教學：ZXing 基礎版、帶 Logo 進階版與 jQuery 前端方案

QR Code（快速響應碼）廣泛應用於行銷、登入、支付等場景。本文提供三種生成方案：Google ZXing 純 Java 後端生成（無 Logo/帶 Logo）與jQuery.qrcode 前端生成，附完整程式碼與關鍵細節說明。

方案一：ZXing 生成基本 QR Code（無 Logo）

public static void main(String[] args) {
    try {
        String content = "https://example.com"; // 內容
        String path = "E:/qrcode/";             // 輸出目錄
        
        MultiFormatWriter writer = new MultiFormatWriter();
        Map hints = new HashMap<>();
        hints.put(EncodeHintType.CHARACTER_SET, "UTF-8");
        
        BitMatrix bitMatrix = writer.encode(content, BarcodeFormat.QR_CODE, 400, 400, hints);
        
        File file = new File(path, "basic_qrcode.jpg");
        MatrixToImageWriter.writeToPath(bitMatrix, "jpg", file.toPath()); // ZXing 3.3+ 建議用法
        System.out.println("QR Code 生成完成：" + file.getAbsolutePath());
    } catch (Exception e) {
        e.printStackTrace();
    }
}

關鍵點：

• MultiFormatWriter 支援多種條碼格式，這裡指定 QR_CODE。
• EncodeHintType.CHARACTER_SET 設定編碼，避免中文亂碼。
• 尺寸 400x400 像素，可依掃描距離調整。
• ZXing 3.3+ 推薦使用 MatrixToImageWriter.writeToPath()，舊版用 ImageIO.write() 搭配自行轉換 BufferedImage。

方案二：ZXing 生成帶 Logo 的 QR Code（高容錯 + 圖片疊加）

完整工具類 QRCodeUtil 核心邏輯：

1. 建立高容錯等級 (H) 的 BitMatrix：ErrorCorrectionLevel.H 允許 30% 損壞仍可掃描，留空間給 Logo。
2. 繪製 QR Code 到 BufferedImage：依 BitMatrix 黑白點填充像素。
3. 插入 Logo：
   • 讀取 Logo 圖片，可選壓縮至指定寬高（預設 80x80）。
   • 計算置中座標 (qrSize - logoW)/2, (qrSize - logoH)/2。
   • 使用 Graphics2D 繪製 Logo，並可選繪製圓角矩形邊框。
4. 輸出檔案或 OutputStream：支援檔案儲存與串流輸出（適合 Web 下載）。

// 使用範例
public static void main(String[] args) throws Exception {
    String url = "https://example.com";
    String logoPath = "d:/logo.png";
    String destDir = "e:/qrcode/";
    QRCodeUtil.encode(url, logoPath, destDir, true); // true = 自動壓縮 Logo
}

完整 QRCodeUtil 原始碼請見原文，包含 createImage、insertImage、多重 encode 過載、mkdirs、decode 解碼等方法。

方案三：jQuery.qrcode 前端生成（零後端依賴）

適合純前端頁面、動態參數生成 QR Code。

<div id="qrcode"></div>
<script src="jquery.min.js"></script>
<script src="jquery.qrcode.min.js"></script>
<script>
$("#qrcode").qrcode({
    render: "canvas", // 或 "table" (IE 相容)
    width: 200,
    height: 200,
    text: "https://example.com",
    foreground: "#000",
    background: "#fff"
});
</script>

• 專案地址：GitHub 範例專案
• 優點：減輕後端負載、即時反映使用者輸入。
• 缺點：無法直接儲存圖檔（需 canvas.toDataURL 轉換）、舊瀏覽器相容性較差。

四、選型建議與常見坑

常見坑：

• 中文內容必須設定 CHARACTER_SET = UTF-8，否則掃描出現亂碼。
• Logo 過大或未設高容錯會導致掃描失敗；建議 Logo 邊長 ≤ QR Code 邊長的 1/5。
• 輸出目錄不存在時記得 mkdirs()，避免 FileNotFoundException。