Technical Specifications & Architecture
📦 QR & Barcode Studio
一个极简、专业且功能完备的现代化在线条形码（Barcode）与二维码（QR Code）实时生成与开发工具。100% 纯客户端本地运行，无后端服务依赖，支持中心嵌入自定义 Logo / 图标、智能输入与格式自适应纠错、PWA / Android TWA 原生级应用安装、矢量 SVG 与透明背景 PNG 导出及多语种暗色模式切换。
🌟 为什么选择 QR & Barcode Studio？
在日常开发、仓储物流、商品零售、外包装印刷以及营销落地页制作中，传统的条码/二维码生成工具往往存在数据上传云端存在隐私泄露隐患、条码格式校验缺失导致工业扫码枪无法识别、不支持透明背景或矢量导出、无法离线使用等痛点。
QR & Barcode Studio 专为开发者、设计师、外贸与仓储从业人员打造：
- 🔒 100% 本地渲染：文本、参数和图像全在浏览器内实时运算，零数据回传，商用机密安全无虞。
- 🎯 工业级严格校验：拒绝静默错误，输入字符实时过滤，粘贴内容智能探测并自适应切换制式。
- 🖼️ 二维码嵌入 Logo：支持任意图片上传与预设，圆角防护底衬，智能联动 30% 超高容错级别。
- 📱 移动端与桌面双优：内置 PWA 与 Android TWA 全套配置，一键安装为主屏幕应用，离线断网即开即用。
✨ 核心功能特性
1. 🏷️ 双码合一（Barcode + QR Code）
- 条形码：覆盖国际主流的 8 种工业与零售标准（
CODE128、CODE39、EAN-13、EAN-8、UPC-A、ITF-14、MSI、Pharmacode）。 - 二维码：支持自由输入任意文本、网址链接，或使用专为开发者设计的动态 URL 参数构建器。
2. 🧠 智能输入与格式自适应校验体系（Smart Validation）
- 按键实时拦截（
beforeinput）：- 选中仅支持数字的格式（如
EAN-13、UPC-A）时，敲击非数字键立即阻断并弹出友好引导 Toast。 - 选中
CODE39时，输入小写字母自动即时转换为大写，减少手动切换大写锁定的繁琐。 - 选中
CODE128时，严格限制在标准 ASCII 字符集，杜绝全角或中文字符导致扫码异常。
- 选中仅支持数字的格式（如
- 智能粘贴与自动制式重定向（Smart Paste & Auto-Switch）：
- 从外部复制文本粘贴到输入框时，系统首先校验是否匹配当前选定格式。
- 若不符合当前格式，算法会自动分析字符串特征（长度、数字/字母/符号构成），自动切换至最适合该文本的条码格式并实时渲染。
- 严谨无静默降级（No Silent Degradation）：
- 坚决杜绝静默裁剪或篡改用户数据。若输入未通过校验（如 EAN 校验位不合法），预览面板高亮显示具体规则与修复建议。
3. 🖼️ 二维码中心嵌入 Logo / 图片
- 本地图片自由上传：支持任意本地格式（PNG、JPG、WebP、SVG 等），推荐使用透明背景 PNG。
- 自适应无损渲染：基于 Canvas 无损绘制，配备圆角安全防护底衬（与背景色融为一体），防止二维码码点与 Logo 边缘产生视觉粘连。
- 尺寸占比滑动调节：支持 15% ~ 30% 占比无级微调，满足不同复杂度 Logo 的视觉平衡。
- 智能纠错联动（Auto-ECL Boost）：
- 添加 Logo 时自动触发切换至 H 级别（30% 容错），确保遮挡中心码点后工业与手机扫码器仍能 100% 极速识别。
- 用户依然可以自由手动选择切回 L / M / Q 等其他容错级别。
- 预设 Logo 与一键清除：内置应用原生矢量 Logo，便于快速查看预览效果，并支持一键恢复无 Logo 状态。
4. ⚡ URL 动态参数构建器（URL Parameter Builder）
- 参数卡片化按需勾选：
access_token：内置加密级随机 Token 生成器，支持单项刷新与复制。uuid：遵循 RFC 4122 标准的 UUID v4 随机字符串生成器。ts：实时当前毫秒时间戳（防缓存与请求溯源）。v：语义化版本号（如1.0.0）。utm：营销推广追踪参数（utm_source&utm_medium）。
- 常用路径预设（Path Presets）：
- 提供
/api/v1/data、/auth/login、/scan/verify、/download/app、/product/detail、/share/invite等快捷标签，一键填入。
- 提供
- 实时构建预览：参数组合变动即时拼装并在预览栏展现完整目标 URL。
5. 📱 PWA & Android TWA 移动应用支持
- PWA 渐进式 Web 应用：
- 包含完整的
manifest.json与sw.js（Service Worker）。 - 采用 Stale-While-Revalidate with Cache Fallback 缓存策略，离线无网环境下完全可用。
- 电脑浏览器地址栏及移动端自动弹出“安装为应用”按钮。
- 包含完整的
- Android TWA (Trusted Web Activity)：
- 提供标准
twa-manifest.json与.well-known/assetlinks.json。 - 可直接使用 Google 官方 Bubblewrap CLI 打包生成 Android 原生 APK 或上架 Google Play 的 AAB 安装包。
- 提供标准
- 全套品牌图标矩阵：
- 包含
favicon.svg、apple-touch-icon.png(180x180)、标准图标与 Android Adaptive Maskable 自适应图标 (192x192, 512x512)。
- 包含
6. 🎨 现代化 UI/UX 与自适应交互
- 高雅色彩系统：以经典科技蓝（
#235194）为基准，精心调配 Light / Dark 双模式变量，暗色调沉稳护眼。 - 国际化（i18n）：简体中文（
zh-CN）与英语（en）一键即时热切换，所有提示、格式解说与弹窗无缝本地化。 - 移动端深度调优：
- 输入框限制
font-size: 16px，彻底杜绝 iOS Safari 聚焦时页面异常放大的问题。 - 针对手机竖屏自适应按钮排布，配置
touch-action: manipulation消除移动端 300ms 点击延迟。
- 输入框限制
- 全格式多维度导出：
- 💾 导出 PNG：高分辨率放大渲染，适合数字展示与发图。
- 📐 导出矢量 SVG：无限缩放不失真，专为专业印刷、包装设计、激光雕刻准备。
- 🏁 导出透明背景 PNG：去除底色，可直接贴入 PPT、海报或各类背景素材中。
- 📋 一键复制到剪贴板：直接将 PNG 图像二进制数据写入系统剪贴板，可直接
Ctrl+V粘贴进微信、飞书、Word 或 Photoshop。
📊 支持的条形码格式与工业规范对比表
| 格式名称 | 规范标识 | 支持字符集 / 编码规则 | 长度/位数要求 | 常见典型行业应用场景 | 快速测试示例 |
|---|---|---|---|---|---|
| CODE128 (通用推荐) | CODE128 |
完整标准 ASCII 字符集（字母 A-Z/a-z、数字 0-9、标点及空格） | 可变长度 | 快递面单、现代仓储物流、企事业单位固定资产管理 | Hello123456! |
| CODE39 | CODE39 |
大写字母 (A-Z)、数字 (0-9)、7种符号 (- . $ / + %) 及空格 |
可变长度 | 汽车零配件、工业精密制造、国防军工、仓储货位标签 | CODE39-TEST 123 |
| EAN-13 | EAN13 |
纯数字 (0-9)，末位为 Modulo 10 校验码 |
恰好 12 或 13 位 | 全球通用超市与零售终端零售商品包装、图书 ISBN 转换 | 5901234123457 |
| EAN-8 | EAN8 |
纯数字 (0-9)，含末位校验码 |
恰好 7 或 8 位 | 包装印刷面积受限的小型商品（如口香糖、烟盒、化妆品试用装） | 96385074 |
| UPC-A | UPC |
纯数字 (0-9)，含末位校验码 |
恰好 11 或 12 位 | 北美地区（美国、加拿大）超市及进出口贸易零售商品 | 012345678905 |
| ITF-14 | ITF14 |
纯数字 (0-9)，交错二五码工业标准 |
恰好 14 位 | 瓦楞纸箱、外包装大集装箱、托盘卡板运输及大宗批发物流 | 12345678901231 |
| MSI | MSI |
纯数字 (0-9)，Plessey 变种码 |
长度不限 | 图书馆藏书借阅管理、超市货架价签更新、仓储定期盘点 | 12345678 |
| Pharmacode | pharmacode |
仅支持数值范围在 1 到 8191 之间的正整数 |
1 ~ 4 位 | 医药制药工业说明书折页、药品包装盒防混淆自动化检测 | 1234 |
🛡️ 二维码纠错级别 (Error Correction Level) 指南
二维码采用国际通用的 Reed-Solomon 纠错算法。本项目提供 4 种标准的纠错等级选择：
| 级别代号 | 容错抗损比例 | 码点密度 | 识别速度 | 最佳适用场景 |
|---|---|---|---|---|
| L (Low) | 7% | 码点最稀疏 | 最快 | 纯数字/短文本、手机屏幕间快速扫码、对密度敏感的极小尺寸显示 |
| M (Medium) | 15% | 适中 (推荐) | 快速 | 绝大多数通用场景的首选，兼顾图案整洁度与抗损能力，适合宣传海报与网页 |
| Q (Quartile) | 25% | 较密集 | 良好 | 纸质名片、商品外包装、易刮擦或经常处于轻度污损环境下的标签 |
| H (High) | 30% | 最密集 | 稳健 | 中心嵌入 Logo/图片的标准配置，允许最高 30% 遮挡或破损依然能无损识读 |
💡 提示：当您在应用内上传或开启 Logo 时，系统将自动切换纠错等级至 H 级，确保中心遮挡完全在容错阈值内，保证扫码枪与各类手机 App 秒级识别。
📁 项目文件架构
barcode-qrcode-generator/
├── index.html # 纯前端单文件核心应用 (集成 HTML5、CSS 变量设计系统、JS 与 i18n 字典)
├── LICENSE # MIT 开源许可证文本
├── README.md # 项目中英文特性介绍与开发者文档
│
├── favicon.svg # 品牌矢量 Badge 图标 (包含扫描光束与条形码意象)
├── favicon.png # 标准 192x192 PNG 应用图标
├── favicon-32x32.png # 浏览器标签页专用 32x32 尺寸图标
├── apple-touch-icon.png # iOS Safari "添加到主屏幕" 专属高分辨率图标 (180x180)
├── icon-192.png # PWA / Android 启动图标 (192x192)
├── icon-512.png # PWA / Android 启动图标 (512x512)
├── icon-192-maskable.png # Android Adaptive 遮罩自适应图标 (192x192)
├── icon-512-maskable.png # Android Adaptive 遮罩自适应图标 (512x512)
│
├── manifest.json # Web App PWA 清单声明文件 (配置启动模式、主题色及快捷方式)
├── sw.js # Service Worker 离线持久化缓存与网络拦截脚本
├── twa-manifest.json # Google Bubblewrap CLI 构建 Android TWA 原生配置
│
└── .well-known/
└── assetlinks.json # Android Digital Asset Links 域名所有权与 APK 签名校验文件
🚀 快速开始与运行
由于本项目采用零构建纯静态设计（Zero Build Step），无需安装 Node.js、npm 或任何打包工具。
1. 方式一：直接在浏览器中打开
在文件管理器中，直接双击打开 index.html 即可在任意现代浏览器（Chrome、Edge、Safari、Firefox）中使用全部功能。
2. 方式二：通过轻量静态服务器运行（推荐测试 PWA）
若需要测试 Service Worker 离线功能或在局域网手机端通过 IP 访问：
# 使用 Node.js 快速开启服务
npx serve .
# 或者使用 Python 内置服务器
python -m http.server 8080
# 或者使用 PHP
php -S localhost:8080
访问 http://localhost:8080 即可体验。
3. 方式三：打包为 Android 原生应用 (TWA)
本项目内置了 Google Chrome 官方认可的 TWA (Trusted Web Activity) 规范配置：
# 1. 全局安装 Bubblewrap CLI
npm install -g @bubblewrap/cli
# 2. 根据 twa-manifest.json 初始化项目
bubblewrap init --manifest=https://your-domain.com/manifest.json
# 3. 编译打包生成原生 APK / AAB
bubblewrap build
🌐 生产部署指南
1. 部署到腾讯云 EdgeOne Pages（国内与海外首选）
- 将本项目推送到您的 Git 仓库（GitHub / GitLab / Gitee / 腾讯工蜂）。
- 登录 腾讯云 EdgeOne Pages 控制台。
- 点击 新建项目 -> 选择授权绑定的代码仓库。
- 构建设置：
- 构建环境预设：
无 (None) / 静态网站 - 构建命令：
留空 - 输出目录：
./
- 构建环境预设：
- 点击 立即部署。全球 Anycast 边缘节点加速，自带免配置 HTTPS 证书，数秒内上线。
2. 部署到 Cloudflare Pages / Vercel / GitHub Pages
- Cloudflare Pages：Connect to Git -> Build output directory 填
./-> 部署。 - Vercel：Import Git Repository -> Framework Preset 选择
Other-> Output Directory 填./-> Deploy。 - GitHub Pages：进入仓库设置 ->
Pages-> Source 选择main分支根目录/保存即可。
❓ 常见问题 (FAQ)
Q1: 为什么生成 EAN-13、EAN-8、UPC 时提示失败？
解答：EAN 和 UPC 属于国际通用的定长商品条码标准，其最后一位是加权校验码（Check Digit）。系统内置了严格的国际校验算法，若您随意填写的 13 位数字校验位不正确，系统会明确拦截以防止打印出无法识别的废码。建议尝试使用表格中的测试样例，或输入 12 位有效数字由标准设备自动补全校验。
Q2: 为什么输入中文时，条形码输入框无法生成？
解答：所有一维条形码工业标准（如 CODE128、CODE39、EAN 系列）在国际规范中均只支持 ASCII 单字节字符集，物理上无法承载中文或双字节字符。如需编码中文字符串，请切换至上方的 「二维码」 选项卡，二维码原生完整支持 UTF-8 编码的中文、日文等复杂文本。
Q3: 粘贴内容时，为什么有时选中的条形码格式会自动改变？
解答：这是本工具专有的 Smart Paste（智能自适应） 体验设计。例如，若您当前处于
CODE39（不支持小写字母），但粘贴了一段包含小写字母的文本，系统检测到它完全符合CODE128规范，便会自动帮您切换到CODE128并弹出提示，省去手动切换制式的繁琐步骤。
Q4: 为什么我的数据绝对安全？是否会发送给第三方？
解答：本项目源码完全公开，所有的条形码生成、二维码矩阵计算、Logo 图像绘制及 PNG/SVG 二进制打包，均通过客户端 JavaScript 与 HTML5 Canvas API 在您的设备本地执行，没有任何 API 网络请求被发往任何远程服务器，可以在断网模式下完整运行，请放心用于商业和内部项目。
Q5: 导出透明背景 PNG 有什么优势？
解答：常规二维码带有白色底衬，贴入深色海报或复杂背景图时会产生突兀的白框。导出的透明背景 PNG 将背景透明化，可与任何设计底图自然融合，且经过边缘防粘连处理，不影响手机镜头对码点的识别。
🧰 技术栈与开源生态
- 核心语言：HTML5, Modern CSS (Grid/Flexbox 响应式排版与原生 CSS 变量设计系统), Vanilla JavaScript (ES6+)
- 条码渲染引擎：JsBarcode (MIT License)
- 二维码渲染引擎：QRCode.js (MIT License)
- 离线与 PWA 规范：W3C Web App Manifest, Cache API Service Worker, Android Digital Asset Links
- 字体与设计规范：Google Fonts (Inter, JetBrains Mono) & 精致内联 SVG 图标
📄 开源许可证
本项目基于 MIT License 开源发布，无论个人使用或企业商用均完全免费。