EdgeOne 免费部署 QRzone，做一个能生成艺术二维码的在线工具

前言

前段时间工作上有批量的二维码需求，网上找了一圈，生成器做出来的基本都是黑白方块的老三样，放在海报、台卡、名片上都很突兀。我想要的是艺术二维码——把二维码的码点藏进一张好看的图里，扫得出来，但看过去是一张完整的画面。

真正意义上"码点融合进图像"的艺术二维码实现起来有点复杂：要控制前景码点和背景图的对比度、要按模块做形变、还要保证容错率不被吃掉，批量生成更是麻烦。折腾了一阵之后我退而求其次，换了个更稳的思路：

用 AI 生成一张背景底图，再把二维码的明暗关系融到底图上。

这样既保留了画面的整体观感，又能稳住扫码成功率，配合脚本就能批量出图。后来干脆把它做成一个网页，部署到 EdgeOne 或 Cloudflare 上，谁有同样的需求直接用就行，不用装环境、不用配密钥。

项目叫 QRzone，开源地址：https://github.com/haihaipypy/qrzone

部署

方式一：腾讯云 EdgeOne Pages（推荐，国内访问快）

1. Fork 本仓库：点击仓库右上角 Fork，把它复制到你的 GitHub 账号下。

2. 创建项目：打开 EdgeOne Makers 控制台，点击 创建项目 → Connect to Git → 授权 GitHub → 选中你 fork 的 qrzone 仓库。

3. 构建配置按下表填写（仓库里的 edgeone.json 已经自动设定了构建/安装/输出目录，这里按表填写只是兜底）：

   配置项	填写值
   框架预设	Next（若列表里只有 Next 就选它；没有就选「静态站点」，edgeone.json 会覆盖）
   根目录	/
   安装命令	yarn install
   构建命令	STATIC_EXPORT=true yarn build
   输出目录	dist
   Node 版本	20（环境变量 NODE_VERSION 设为 20）

   

   这里几个参数解释一下：STATIC_EXPORT=true 是让 Next.js 走静态导出，因为整个工具是纯前端的，不需要 Node 服务端，导出成静态文件后随便丢到哪个 CDN 上都能跑；输出目录 dist 要和 edgeone.json 里写的一致，写错了会报"找不到输出目录"。

4. 点击部署，等待构建完成（约 2~4 分钟），就能拿到一个 xxx.edgeone.dev 的专属域名。

5. 绑定自定义域名（可选）：项目设置 → 自定义域名 → 添加你的域名，然后去域名服务商那里加一条 CNAME 记录指过去，等解析生效即可，SSL 证书 EdgeOne 会自动签发。

   

全程不需要配置任何密钥：Agnes API Key 由每位访客在自己浏览器里填写，不经过服务端，也不会被存储。

方式二：Cloudflare Pages

1. 创建项目：打开 Cloudflare 控制台 → Workers & Pages → 创建 → Pages → Connect to Git，选中你 fork 的 qrzone 仓库、main 分支。

2. 构建配置按下表填写：

   配置项	填写值
   框架预设	无（None）
   构建命令	STATIC_EXPORT=true yarn build && cp public/_redirects dist/_redirects
   构建输出目录	dist
   环境变量	HUSKY=0（可选，避免 prepare 钩子报错）

   

   比 EdgeOne 多的那句 cp public/_redirects dist/_redirects，是为了把 SPA 的重写规则一起拷进产物目录，否则刷新子路由会 404。

3. 点击部署，约 1~3 分钟完成，拿到 qrzone.pages.dev 地址。

4. 绑定自定义域名（可选）：在该 Pages 项目的 自定义域 里设置。

提示：国内访问 Cloudflare 时快时慢，介意的话优先选方式一（EdgeOne Makers）。

使用

1. 打开网页

不想自己部署的话，可以直接用我搭好的这个，不需要登录，也不保存任何数据：

地址：https://qrzone.1day.vip/zh/

2. 生成基础款二维码

项目内置了几种基础款风格，填入 URL 后选一个风格就能直接生成，每种风格还提供了一些样式微调，下载支持 SVG / JPG / PNG 三种格式。要印刷的话优先选 SVG，矢量放大不会糊。

3. 生成艺术二维码

选择第一个风格，在风格提示词里填写你想生成的底图画面，没思路的话可以参考「随机生成」给出的提示词。

生图功能接入的是 Agnes Image 2.5 Flash 文生图模型，填写你自己的 Agnes API Key 即可，没有的话去官网注册个账号就行，选它主要是因为可以免费生图。想换别的大模型，改 src/lib/agnes.ts 就行；完全不想接 AI 的话，也可以直接上传本地图片当底图。

API Key 只保存在你浏览器的 localStorage 里，服务端不留存，也不读取任何相关环境变量。

生成结果会自动做一次本地扫码验证：先解码看看能不能扫出来，对比度不足就自动增强，仍然通不过的话会退化成标准黑白二维码兜底，保证你拿到的图一定能扫。

几个避坑提醒

• 构建失败先看 Node 版本：默认 Node 18 装 Next 项目会报引擎错误，环境变量里把 NODE_VERSION 改成 20 基本就解决了。

• 别追求过高的融合度：底图越花、码点对比度越低，扫码成功率就越差，尤其是 printed 在小尺寸物料上时。做出来之后务必用手机实扫一遍再批量印刷。

• 二维码内容越短越好扫：长 URL 会让码点变密，建议先套一层短链。

• 自定义域名要等解析生效：CNAME 加了之后一般几分钟内生效，个别服务商要等十几分钟，期间访问会失败，耐心等一下就好。

• API Key 记得定期轮换：虽然只存在本地浏览器，但在公用电脑上用完建议清一下站点数据。

结尾

整个项目是开源的，如果你也有批量出好看二维码的需求，直接拿去用就行。觉得有帮助的话，欢迎去 GitHub 点个 Star。