在线二维码工具的套路都挺统一:免费生成,导出时糊个水印,想要高清就得注册,想改颜色就得开会员。明明只需要一张几百像素的图,最后要走完注册、登录、验证邮箱一整套流程。

最近翻到一个反着来的项目 QR StarCode:整个应用就是一个 index.html,没有后端、没有框架、没有 node_modules。打开就能用,导出的图上什么多余的东西都没有。源码全在 GitHub 上,MIT 协议,想改成什么样都行。

它是什么

QR StarCode 是一个纯前端的二维码生成 + 解析工具,所有计算都在浏览器里完成,数据不上传、不留痕。它有三个模式:标准(生成常规二维码)、ChromaCode(把图片融进码里)、扫码(读取并拆解二维码内容)。

技术上真的就是「一个文件」:index.html 里塞下了全部 HTML、CSS 和 JS;worker.js 是可选的 Cloudflare Worker,只在 ChromaCode 抓网站 favicon 时用来绕 CORS。没有构建步骤,没有配置文件,克隆下来双击就能跑。

三种模式,一屏切换

页面顶部三个页签:标准 / ChromaCode / 扫码。左边选类型、填内容,右边实时出码——没有「生成」按钮,输入框一变,码跟着变。

标准模式:11 种类型,边打边出码

11 种类型,边输入边出码

支持的 11 种内容:URL、文本、WiFi、Email、电话、SMS、WhatsApp、位置、日程(iCalendar)、vCard、DuitNow。

用起来的几个细节挺顺手:

  • 每个类型都会把实际编码的原始字符串显示出来(mailto:、tel:、geo:、WIFI:T:WPA;S:... 这种),旁边有个复制按钮,调试时不用猜码里到底写了什么
  • 手机号字段带 180+ 国家区号,下拉里直接挂国旗
  • 每个输入框实时校验,格式不对当场提示,不用等到生成完才发现扫不出来
  • WiFi 类型可以选把 SSID、密码、加密方式印在图上,贴在店里比让人猜密码省事

颜色、模板、描边、中心 Logo 都能改

自定义这块给得比多数在线工具足:

  • 前景色 / 背景色随便挑,内置 7 个预设,对比度太低会警告(怕你生成一个扫不出来的码)
  • 中心 Logo 上传,自动留白,不会糊住三个定位角
  • 描边和留白区(quiet zone)宽度可调,反色也行
  • 导出分辨率 256 / 512 / 1024 / 2048 四档
  • SVG 导出,印刷放大不糊
  • 还带一套节日模板:圣诞、万圣、新年、复活节、情人节、圣帕特里克节、生日

ChromaCode:把图片揉进二维码

把图片揉进二维码里

这个模式比较有意思。它不是简单地在中间贴个 logo,而是把一张图拆成点阵、和码的模块混在一起——远看是那张图,近看还是二维码,扫得出来。

  • 输入一个网址,自动抓该站的 favicon 当素材;也能直接上传图片或填图片地址
  • 提供 5 个版本(7 / 10 / 13 / 15 / 18) 横向对比,版本越高码越密、图越清晰、也越难扫
  • 可调参数:点形状(圆形 / 圆角 / 方形)、暗点范围、ghost 强度、阈值
  • 有 Auto-Tune,按图片特征自动配参数
  • 顺带把图里的主色板提取出来给你参考

算法出自 Toms Nimanis 的 chromacode。想做一个「扫出来是自家 logo」的码,这个模式最省事。

扫码解析:把码拆开看

扫一下,拆开每个字段

扫码模式支持摄像头、上传图片、剪贴板粘贴三种方式(扫码引擎是懒加载的 jsQR,不点开不占资源)。真正花心思的是解析:

  • DuitNow / JomPAY 的 EMV 字段逐条拆开,TLV 结构看得明明白白
  • 70 家收单机构按 Acquirer ID 反查,告诉你这张码是哪个银行 / 钱包出的
  • CRC-16 校验,给 ✓ 有效 / ✕ 无效,不匹配时把期望值也算给你
  • 300+ MCC 商户类别码翻译成人话
  • 识别 JomPAY(acquirer 898989)并显示 Biller Code
  • 解码小费 / 便利费(EMV ID 55/56/57)、商户渠道(62.11,拆成媒介类型、交易地点、商户在场方式)
  • 有 SHA-256(ID 82)就显示出来
  • 解析完还能重新生成一张干净的 DuitNow 品牌码,尺寸从贴纸到 A4,商户名和银行名的字号可调

最后还有一层二维码安全分析:可疑 URL、开放 WiFi、加密货币地址、支付码都会给你标出来。拿不准一个码该不该扫,可以先丢进去看看。

怎么跑起来

直接用:打开 https://qrcode.aixmb.cn 就行。

本地跑:

1
2
3
4
git clone https://github.com/deadboy18/qr-studio.git
cd qr-studio
# 双击 index.html,或者起个本地服务
python3 -m http.server 8000

自己部署:因为只有一个静态文件,扔哪都行。Cloudflare Pages 的话,构建命令留空、输出目录填 /,推上去就有;GitHub Pages 在 Settings → Pages 里选 main 分支和 / (root) 即可。Vercel、Netlify、NAS 上的 nginx 同理。

技术栈

层 用的东西
页面与逻辑 原生 HTML / CSS / JavaScript
二维码引擎 qrcode-generator 1.4.4
扫码引擎 jsQR 1.4.0(懒加载)
ChromaCode 算法 Toms Nimanis / IT Linden 的 chromacode
DuitNow 规范 PayNet QR Spec v1.5
字体 DM Sans + JetBrains Mono(Google Fonts)
构建系统 无,就一个文件
后端 无,纯客户端
CORS 代理 Cloudflare Worker(可选,只给 ChromaCode 抓 favicon 用)
统计 / 追踪 无

几个先说清楚的事

  • DuitNow 生成的码格式和 CRC 都对,但不能真的收款。商户号 / QR ID 得通过收单行在 PayNet 注册过才行。它适合拿来测 EMV 解析器、学 DuitNow 码是怎么拼的,别拿它去店里收钱
  • 抓 favicon 需要 CORS 代理。自己起个 Cloudflare Worker 最稳(免费额度 10 万次/天,worker.js 直接贴进去就行),默认会退回公共代理,但公共代理慢、还可能拦域名。上传图片那一路不受影响
  • 单文件 = 几千行堆在一个 HTML 里。好处是部署零成本、安全审计一眼看到底;坏处是想深度二次开发,得先花点时间熟悉它的组织方式
  • 纯客户端也意味着没有服务端批量 API。要一次生成几千张码,得自己在页面里循环,或者把它的编码函数抽出来改成脚本

小结

QR StarCode 最舒服的地方是把「生成一张二维码」这件事还原到了它本该有的简单程度:打开网页、填内容、下载,中间没有注册、没有水印、没有弹窗。想要花活儿(图片融合码、DuitNow 拆解、Logo、节日模板),它也都给到了,而且全是本地算的,内容不用交给任何服务器。

如果你经常要出码——做海报、印菜单、贴 WiFi、做活动物料——把它存成书签,或者干脆自己部署一份,比每次去搜在线工具省心。

QR StarCode 开源 MIT 单文件

单 HTML 文件的二维码工具:11 种数据类型、实时预览、颜色 / 模板 / 中心 Logo 自定义、ChromaCode 图像融合码、带 DuitNow EMV 字段解析的扫码器,支持 PNG & SVG 导出。全程浏览器本地运行,无水印、无注册、无追踪。

★ 8GitHub Star
⑂ 62Fork
MIT开源协议
单文件部署 ChromaCode DuitNow 解析 隐私优先