OpsKitPro logo
OpsKitPro_
ブログへ戻る
工具2026-04-224 min

QR 生成ツール qrgen の設計・実装・使い方

テキストを入力すると即座に QR を生成し、PNG でダウンロードできます。

この記事では設計・実装・使い方を通して読めます。下の本文からそのまま進めます。
ツールを開く
QR 生成ツール qrgen の設計・実装・使い方
本文について

このページは、背景から実装、使い方までを一続きで読めるように整えています。

本文

二维码工具真正要解决什么

01

qrgen 的使用场景很简单:把一段链接、配置片段、文案或者联系方式,快速变成可扫描的二维码。很多时候你并不需要复杂设置,你只需要一个清楚的预览和稳定的导出。

因此这个页面的核心不是“花样很多”,而是“输入后马上能看见结果”。

参考ファイル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