qrframe 開源 QR Code 產生器，用程式碼把條碼畫成作品

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

免費的 QR Code 產生器滿街都是，但九成九只給你黑白方塊。qrframe 走的是另一條路：它是一個開源的「QR Code 設計器」，十六種內建樣式全部可以調參數，更進一步，每一種樣式的原始碼就直接開在網頁裡的程式碼編輯器上，你改程式碼，碼就跟著變。整個生成過程在你自己的瀏覽器裡跑完，不經過別人的伺服器。

先給結論：如果你要做的是海報、名片、活動視覺，想讓人掃碼之前先記住這個碼，qrframe 值得一試，而且免費、開源、不用註冊。但如果你要做的是支付、出貨標籤、正式印刷品上那種「掃不出來就完蛋」的碼，它最漂亮的那一批樣式恰恰是風險所在，這件事連作者自己都寫在警告欄裡。下面把它的能力邊界和真實形狀講清楚。

把 QR Code 當畫布，十六種樣式全攤開給你改

打開 qrframe.kylezhe.ng，左邊是控制面板，右邊是即時預覽，深色介面，沒有帳號、沒有登入，輸入網址立刻出碼。樣式列一次排開：Basic、Circle、Camo、Neon、Glass、Mondrian、Quantum、Tile、Drawing、Halftone、Layers、Dots、Minimal、Blocks、Bubbles、Alien，共十六種，外加一個「Create new」從零開始。從圓點、霓虹、玻璃質感到手繪風都有，其中 Blocks、Bubbles、Alien 是作者坦承從 QRBTF 借來的樣式。

Pin

每種樣式自帶一組參數面板。以 Basic 來說，邊距、前景色、背景色、方圓形狀、圓角程度、像素大小、中央 Logo 與 Logo 尺寸都在拉桿和調色盤上，改了立刻反映到預覽。真正拉開差距的是「Code editor」按鈕：點下去，這個樣式的 JavaScript 原始碼整個攤開在 CodeMirror 編輯器裡，第一行就是 import { Module } from "qrframe"。樣式的參數面板本身就是程式碼裡的 paramsSchema 物件生出來的，你加一個參數定義，面板上就多一個控制項。換句話說，介面是程式碼的投影，沒有藏起來的黑盒子。

Pin

寫過一點前端的人會在這裡找到不少熟悉的東西。樣式碼裡拿到的 qr 物件就是一個 Uint8Array 矩陣，配上一組位元遮罩常數，讓你分辨某個格子是資料、定位圖還是校正圖；想要樣式每次長得一樣，還有現成的種子隨機數可以用。倉庫裡附了一個 68 行的教學樣式，從 paramsSchema 到 renderSVG 一路讀完，就是一份最小可運作範本，拿它當起點比看文件快。編輯器本體是 CodeMirror，連 Vim 鍵盤模式都裝好了，這個細節很誠實地暴露了這工具本是寫給會寫程式的人玩的。

實測輸入內容的行為也符合預期。輸入短網址時，中繼資料面板顯示 Version 2（25×25 矩陣）、容錯 15%；換成一篇長文章網址，版本自動升到 Version 5（37×37）。內容愈長，碼愈密，這是 QR Code 的基本物理，qrframe 把版本、容錯這些中間過程全部攤在面板上讓你看著它長大。

對於要精確控制的工程用途，Data 分頁還有四組進階控制：編碼器、最低版本、最低容錯（7%、15%、25%、30% 四級，對應國際標準的 L、M、Q、H）、遮罩圖案 0 到 7。這裡有個值得知道的語意：面板給的是「最低」容錯的保證，並沒有答應給你剛好那個值。實測把最低容錯設在 7%，最終拿到的碼是 15%，因為它只保證不低於你的要求，會在能放進資料的前提下自己挑版本。想要鎖死規格，把旁邊的 Exact 開關打開就行。

Pin

漂亮和掃得掉之間，作者先把醜話說完

這是 qrframe 最有意思的地方：它是一個追求美的工具，但對「美的代價」異常誠實。

倉庫的 README 開頭就放了一個大寫的 CAUTION 警告塊，原文直譯是「這些範例 QR Code 可能無法可靠地被掃描，結果會依裝置和掃描器大幅變化」。網頁本身也在匯出按鈕旁邊印著一行提醒：先在真實條件下試掃你的碼。作者自己的編碼引擎庫 furious-qr 文件裡寫得更直白：只有普通的 QR Code 應該用於真實應用。

為什麼漂亮會出事？有人在 2024 年 10 月開了一條至今未關閉的 issue，論點很硬：QR Code 的國際標準 ISO/IEC 18004 第 6.3.1 節要求模組「名義上為正方形」，而 qrframe 一大批最美樣式（圓點、手繪、暈影、嵌圖）改動的正是模組形狀。掃描器能不能容忍非方模組，取決於各家演算法的實作寬容度，這是運氣，不是保證。issue 底下有人留言，自己的 S23 手機相機就是掃不出來。作者的部落格有一篇長文專門拆解「怎麼做出又美又掃得到的碼」，開頭第一句就點破：沒有人會特地想去掃一個 QR Code。文中把容錯的原理講得明白：QR Code 靠 Reed-Solomon 糾錯在受損時還原資訊，塞進中央 Logo 吃掉的正是這份冗餘，容錯開愈高碼就愈密，美和密的取捨躲不掉。這篇文章 2024 年 9 月發表、2026 年 8 月還在更新，搭配 issue 的標準分析一起讀，你會發現作者比任何人都清楚這條線在哪裡，只是選擇把判斷權交給使用者。那條 issue 本身則沒有維護者的正式答覆。

所以使用線要自己畫清楚。品牌實驗、海報、名片、活動道具、作品集，這些場合掃不出來頂多重拍一張，花俏樣式的記憶點值得冒險。支付、票券、出貨、正式印刷的量產碼，請用 Basic 或 Minimal 這種規規矩矩的樣式，或者在送印前用至少兩支不同廠牌的手機實機掃過。這條線是從標準爭議、官方警告和容錯原理推出來的判斷，官方使用條款裡並沒有這一段。

生成在瀏覽器裡跑，樣式程式碼會自己出門抓料

qrframe 的隱私形狀，比「純前端工具」四個字更立體，實際打開官網記錄網路請求後會分成幾個層次來看。

先看核心的生成環節，內容確實不出門。輸入的網址、文字在頁面上由 web worker 處理，實測看得到一串 blob 開頭的 worker 請求；切到 Basic 樣式後輸入內容、重新生成，全程沒有任何 POST 請求，也沒有往第三方網域送的封包。你輸入的內容不會被送到別人的伺服器，這一點實測成立。

再往外表一層看，部分樣式的程式碼會對外抓東西。Drawing 樣式開頭第二行就是 import rough from "https://esm.sh/roughjs"，從公用 CDN 引入手繪渲染庫；Halftone 樣式則會去 fetch 一張維基共享資源的示範照片當背景。這不是偷跑，是樣式程式碼本來就有對外取用的能力，README 也明說樣式可以引入外部程式庫、抓外部檔案。只是「全部都在瀏覽器裡執行」和「完全離線」不能畫上等號，內網斷網環境或對第三方連線敏感的場合，先知道這件事比較好。

最後是網站本身：頁面掛著 Cloudflare 的網站統計（Insights），載入時有它的 beacon 請求，這是站長看流量用的，和你的碼無關，但嚴格來說造訪本身會留下統計紀錄。

另外兩個誠實到少見的技術交代：樣式程式碼跑在沒有沙箱的 worker 裡，官方文件的說法是沒有東西可被攻擊或利用，壞程式碼的風險就是讓你的分頁掛掉，貼上別人分享的樣式程式碼前自己看一眼；生成的 SVG 不做消毒處理，匯出的檔案內容就是渲染結果本身，實測下載的 SVG 是 3,390 位元組的純文字向量檔，PNG 則是 10,141 位元組，兩種格式按鈕一按就到手，乾淨俐落。縮圖和預覽都跑在同樣的 worker 機制裡，樣式算太久會被強制停止，程式碼裡的逾時訊息寫著超過 5 秒就放棄，所以就算你貼到一個寫了無限迴圈的樣式，下場也只是縮圖不出來，不會把整個網站拖死。

同一片光譜上，它選了最硬的位置

免費 QR 工具大致排成一條光譜。一端是無腦生成器，輸入網址出一張黑白色塊，適合「能用就好」；中間是 QRBTF 這類參數化設計服務，樣式精緻但走商業化路線；另一端是開發者自架方案，像先前介紹過的 serverless-qrcode-hub，把換碼入口收進自己的 Cloudflare Workers。qrframe 站的位置最硬：開源、MIT 授權、樣式就是可讀可改的程式碼、不用註冊，等於把 QRBTF 那套「參數化美學」的鑰匙直接交到你手上。它甚至把和 Anthony Fu 的 QR Toolkit 的淵源寫在 README 第一段，這種把靈感來源講明白的寫法在工具圈並不多見。

如果你要的是規規矩矩的向量 QR 產生器，站上的 qrsvg 更輕；要條碼（Barcode）支援看 barcode-generator；要「換了內容不用重印」的活碼場景看 serverless-qrcode-hub。qrframe 的不可替代之處只有一個，但很集中：把碼的長相當成可以被程式化的畫布。

順帶一提，倉庫的 examples 資料夾比網頁上的十六種還熱鬧，wood、matrix、childhood 這些設計稿躺在裡面，沒有做成內建樣式，想挖靈感可以直接去翻，svg 檔打開就是成品。這也側面說明了這個專案的性質：它本質上是一個持續在長的樣式實驗場，網頁只是實驗成果的展示窗。

掃描相容、學習曲線與單人維護，下載前先看

掃描相容性前面講透了，這裡不再重複。

學習曲線是另一道門。拉桿式生成器人人會用，但 qrframe 的完整能力要讀得懂 JavaScript：paramsSchema 定義參數、renderSVG 或 renderCanvas 函式畫圖、qr 物件裡的 matrix 矩陣和 Module 位元遮罩。十六種內建樣式調參數不寫程式也夠玩，但「Create new」之後就是寫程式的人的世界。好入場的是，樣式碼都很短，多數一兩百行以內，對讀得懂 JavaScript 的人負擔不大，真正的門檻在於要對 QR 結構有一點想像力，知道哪些格子動得、哪些動不得。

維護面也要看清楚：這是一位獨立開發者的個人專案，巴士係數是 1。不過活躍度實測相當好：GitHub 上 3,376 顆星、109 個 fork，最後一次推送在 2026 年 9 月 30 日，倉庫 2024 年 5 月建立，2024 年 9 月底登上 Hacker News 首頁拿到 401 分、79 則討論，掃描爭議也是那一週爆開的。作者對 issue 的態度不冷淡，有人在 2025 年 10 月問自架到子路徑的問題，作者連兩天在 issue 裡給出修法，2026 年 7 月的版本為子路徑部署做了準備、也拔掉了 Cloudflare 相關依賴；不過 README 自己標明，上游框架的修補合併釋出之前，非根路徑的部署仍不完整，想掛在子路徑的人要有心理準備。社群貢獻也有收進來，一鍵複製按鈕就是外部貢獻者送的。

還有個小提醒給會去搜舊資料的人：網路上 2024 年的介紹文會說它用 Rust 寫的編碼器在瀏覽器裡跑，這已經過時。2026 年 7 月起換成純 TypeScript 的 npm 套件，2026 年 9 月 30 日連套件名都從 fuqr 更名成 furious-qr。照著舊文改程式碼會撞牆，以倉庫現況為準。

授權與專案狀態

MIT 授權，商用、改作、自架都不用問人。專案狀態截至 2026 年 10 月：持續維護中，無正式 release 標籤，作者直接部署靜態站，要鎖版本就 fork 或抓 commit。引擎本體 furious-qr 另立倉庫，同樣 MIT，型別定義齊全，想在自己的專案裡直接呼叫 QR 編碼也可以單獨用它。引擎倉庫裡還留了一個有趣的雙實作：TypeScript 是主線，另外一份不依賴外部套件、不做堆積配置的 Rust 移植版並存，要嵌進別的環境的人有兩種選擇。作者是 Kyle Zheng，個人網站上那篇 QR 美術長文值得想深入的人一併讀。

一句話收尾：qrframe 是那種「把一件事做到極致，同時把極致的代價貼在門口」的工具。打開網站、輸入網址、換個樣式，三分鐘就能感受它的魔力；真要把它做出來的碼放上街頭，記得先過你自己手機那一關。