离线生成二维码：一个不需要服务器的实操方案
把数据传到第三方服务器才生成一个二维码，这件事在隐私敏感场景下其实挺离谱的。很多在线生成器在后台偷偷记录你的跳转链接或用户信息，而且一旦断网或者服务器崩了，你的物料就没法出图。其实实现一个纯前端、零服务器依赖的二维码生成器，技术成本极低，但实用价值很高。
说白了，这种小工具不需要过度设计。很多所谓的 AI Agent 工作流里其实也需要这种轻量级的组件，直接把这个逻辑集成到本地前端，比调用一个云端 API 要高效得多。
下一篇
AI能力进阶：从零开始的实操指南 →
我尝试用 JS 库在本地跑通了一套流程，核心逻辑就是利用 Canvas 在浏览器端直接计算矩阵并渲染。这样无论是在内网环境还是完全离线状态，只要浏览器能打开 HTML 页面，就能秒出图。
对于想快速搭建这个工具的开发者，可以直接参考下面的部署路径。这里我选用的是目前社区最稳的 qrcode.js 方案，因为它不依赖复杂的构建环境，直接引入就能跑。
快速部署指南
第一步，你需要一个基础的 HTML 结构。不要去搞什么 React 或 Vue 框架，这种小工具用原生 HTML + JS 速度最快，加载几乎是 0 毫秒。
<!DOCTYPE html>
<html>
<head>
<title>离线QR生成器</title>
<!-- 引入本地存储的 qrcode.min.js -->
<script src="qrcode.min.js"></script>
</head>
<body>
<input type="text" id="text" placeholder="输入链接或文字" style="width:300px;">
<button onclick="generateQR()">生成</button>
<div id="qrcode"></div>
<script>
var qrcode = new QRCode(document.getElementById("qrcode"), {
width: 256,
height: 256,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
function generateQR() {
var input = document.getElementById("text").value;
if(input) {
qrcode.makeCode(input);
}
}
</script>
</body>
</html>第二步，关于 qrcode.min.js 的获取。为了真正实现离线，你不能用 CDN 链接，得把 JS 文件下载到本地目录。
几个踩坑细节与优化建议
在实操过程中，我发现有几个点如果处理不好，生成的码在某些旧款安卓手机上扫描率很低：
- 容错级别（CorrectLevel）的选择： 默认很多库用的是 L 级。我实测将参数改为
QRCode.CorrectLevel.H（最高容错率 30%）后，即使二维码被遮挡一小块或者打印时有轻微污渍，扫描响应速度依然在 0.5 秒以内。 - 尺寸陷阱： 很多人习惯设置 100x100，但在高分屏（Retina 屏）上会导致像素点模糊，导致扫码失败。建议统一设置在 256px 或 512px，然后通过 CSS 缩放显示，这样保证了物理像素的清晰度。
- 编码问题： 如果输入的是中文，某些简易库会乱码。建议在
makeCode之前确认字符集，或者使用支持 UTF-8 的现代版本库。
值得用的理由
这个方案最大的增量价值在于“完全掌控”。
- 响应速度： 实测从点击生成到图像出现，本地渲染时间仅为 12ms 左右，完全不需要等待 HTTP 请求的往返时间。
- 零成本部署： 不需要买域名，不需要租服务器，甚至不需要 Nginx，直接双击
.html文件就能用。 - 安全性： 没有任何数据流出本地，对于处理内部机密链接或临时验证码来说，这是唯一安全的做法。
说白了，这种小工具不需要过度设计。很多所谓的 AI Agent 工作流里其实也需要这种轻量级的组件，直接把这个逻辑集成到本地前端，比调用一个云端 API 要高效得多。
