EN
#10
代码生成纯本地运行矢量导出PWA

QR & Barcode Studio 条形码与二维码工作台

极简专业、100% 纯客户端本地运行的条形码与二维码实时生成开发工具，支持中心嵌入自定义 Logo、智能纠错、矢量 SVG 导出与 PWA 安装。

访问生成器工作台 (scan.satelc.com)

应用与工程截图

1 张视图
条形码与二维码生成工作台
条形码与二维码生成工作台

详细技术介绍与功能架构

📦 QR & Barcode Studio

一个极简、专业且功能完备的现代化在线条形码（Barcode）与二维码（QR Code）实时生成与开发工具。100% 纯客户端本地运行，无后端服务依赖，支持中心嵌入自定义 Logo / 图标、智能输入与格式自适应纠错、PWA / Android TWA 原生级应用安装、矢量 SVG 与透明背景 PNG 导出及多语种暗色模式切换。

License PWA Ready Android TWA Zero Backend HTML5 Single-File Theme i18n Deploy

🌟 为什么选择 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（国内与海外首选）

  1. 将本项目推送到您的 Git 仓库（GitHub / GitLab / Gitee / 腾讯工蜂）。
  2. 登录 腾讯云 EdgeOne Pages 控制台。
  3. 点击 新建项目 -> 选择授权绑定的代码仓库。
  4. 构建设置：
    • 构建环境预设：无 (None) / 静态网站
    • 构建命令：留空
    • 输出目录：./
  5. 点击 立即部署。全球 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 开源发布，无论个人使用或企业商用均完全免费。