工具2026-04-224 min
QR 生成ツール qrgen の設計・実装・使い方
テキストを入力すると即座に QR を生成し、PNG でダウンロードできます。
この記事では設計・実装・使い方を通して読めます。下の本文からそのまま進めます。
ツールを開く本文について
このページは、背景から実装、使い方までを一続きで読めるように整えています。
本文
二维码工具真正要解决什么
01qrgen 的使用场景很简单:把一段链接、配置片段、文案或者联系方式,快速变成可扫描的二维码。很多时候你并不需要复杂设置,你只需要一个清楚的预览和稳定的导出。
因此这个页面的核心不是“花样很多”,而是“输入后马上能看见结果”。
参考ファイルsrc/app/tools/qrgen/qr-client.tsxsrc/app/tools/qrgen/page.tsx
为什么要保持单一主线
02二维码工具如果做得太复杂,用户会困惑到底该调哪一项。我更希望它像一个“输入框 + 预览区”的二段式工具:左边输入,右边确认,按钮只保留下载这一件事。
这样既能让页面足够轻,也能让扫描结果在视觉上更稳,特别适合日常临时分享。
参考ファイルsrc/app/tools/qrgen/qr-client.tsxsrc/dictionaries/zh.jsonsrc/dictionaries/ja.json
实现和用法
03实现上我直接用了 `qrcode.react` 的 `QRCodeSVG`,然后通过序列化 SVG 再转成 PNG 下载。这样生成过程完全在前端完成,不需要额外的后端依赖。
使用时只要把内容贴进去,右侧就会出现预览。确认没问题后点下载即可,适合快速把链接、临时说明或者访问地址发给别人。
参考ファイルsrc/app/tools/qrgen/qr-client.tsx