QR code 產生器｜規設小祕密

在瀏覽器內製作 QR Code 的單一網頁工具。可在 QR 中央加上白色描邊的中文字，並在下載前自動以辨識器實測可讀性。所有產生與辨識都在本機完成，不會上傳任何內容。

本工具以桌上型電腦的瀏覽器（新版 Chrome／Edge）為使用環境，不針對手機版面設計。

使用方式

• 直接開啟：下載 index.html，用瀏覽器開啟即可，不需安裝、不需網路。
• 放上網站：把 index.html 放到任何靜態網站空間（例如 GitHub Pages）即可使用。

字型、QR 產生器與辨識器都已內嵌在 index.html 中，離線也能正常運作。

畫面配置

整個工具固定在一個畫面內，1280 × 720 以上的螢幕不需捲動頁面。

位置	內容
左欄	01 掃描內容、編碼資訊（版本、容錯、每格像素、內容長度）
中欄	即時預覽（1:1 像素）
右欄	02 輸出模式、03 中央文字、檢查結果與下載

一般操作只需四步：在左欄貼上內容，在右欄選擇模式、輸入中央文字，再按下載。較少調整的「尺寸與容錯」與「文字樣式與位置」收在可展開的區塊，收合時會顯示目前數值。

兩種輸出模式

模式	尺寸	容錯	中央文字	用途
一般	100–1000 px，預設 400 px	自動，不低於所選等級	可加	一般張貼、標示
工作單	固定 120 px	固定 L 級	不可加	放入工作單的完整 QR

尺寸指 QR 本體，四周留白另外加上。兩種模式預設都只留細邊（約 2 px，尺寸較大時為 0.5%），例如 400 px 輸出 404 px、120 px 輸出 124 px。若手機不易對焦，可改為 1–4 格（4 格為 QR 規範建議值）。

工作單模式的判定

工作單尺寸固定，內容越長、格子越小，因此以「每格像素」判定是否適合列印：

每格像素	對應內容長度（L 級，位元組模式）	結果
3.5 px 以上	78 bytes 以內	綠燈：通過
2.9–3.5 px	79–134 bytes	黃燈：可下載，建議試掃
未滿 2.9 px	超過 134 bytes	紅燈：不可下載，請縮短內容

工作單模式不會自動提高容錯，因為容錯越高格子越多，每格反而越小。

自動辨識檢查

停止輸入後自動檢查，只有綠燈與黃燈結果可以下載。

1. 原圖辨識：把成品縮至 500 px 以內，用 jsQR 讀取並核對內容完全一致。
2. 縮小 50% 辨識：模擬列印縮小或拍攝距離較遠的情況。
3. 文字周圍餘裕：在中央文字的上、下、左、右各塗白一塊 k × k 格，逐步加大，確認仍可讀取。目標是通過 2 × 2。
4. 自動調整：有中央文字時，先在同一容錯等級微調文字位置，仍不足就往上提高容錯，直到全部通過或達到 H 級。
5. H 級仍無法讀取：自動測試較小字級，提供「套用建議」按鈕。

燈號	意義
綠	原圖、縮小 50% 與文字周圍 2 × 2 測試全部通過
黃	原圖可讀，但有一項風險，例如縮小後讀不出或文字周圍餘裕不足
紅	無法讀取或工作單格子太小，下載鎖定

檢查屬於數位影像上的抽測，無法保證實際列印與各種手機都能讀取。列印後請務必再用手機試掃。

中央文字

• 使用內嵌的 Noto Sans TC Black（900 字重），在任何電腦上外觀一致。
• 白色描邊沿筆畫留白，字與字之間仍保留 QR 圖案。
• 文字永遠不會覆蓋三個角落的定位圖案。
• 可在預覽上直接拖曳文字，或點選預覽後用方向鍵移動 1 px，按住 Shift 一次移動 1 格。

下載

• PNG：與預覽相同的像素尺寸。
• SVG：QR 為向量路徑，中央文字為內嵌圖片。

檔名格式為「中央文字（或內容前 20 字）-尺寸px」，例如 施工位置-400px.png。

隱私

• 不保留歷史紀錄，重新開啟頁面即清空。
• 不連線到任何外部服務，所有運算都在瀏覽器內完成。

檔案結構

整個工具只有一個 index.html，依序包含：

區段	內容
<style>	介面樣式
<style>	內嵌字型 Noto Sans TC 900（依 Unicode 範圍切分的 WOFF2）
<main>	介面結構
<script>	qrcode 1.5.4（QR 產生）
<script>	QRRenderer：繪製 QR 與中央文字
<script>	jsQR 1.4.0（在 Web Worker 中辨識）
<script>	主程式：模式、檢查流程、拖曳與下載
檔尾註解	第三方授權全文

第三方元件與授權

元件	用途	授權
qrcode 1.5.4	產生 QR Code	MIT
jsQR 1.4.0	辨識 QR Code	Apache License 2.0
Noto Sans TC	中央文字字型	SIL Open Font License 1.1

各元件的授權全文附在 index.html 檔尾的註解中。

作者

設計：SuperGG，看心情維護。