JavaScript 生成二维码首选 qrcode.js 库，支持 Canvas 渲染与 base64 图片导出；可自定义颜色、嵌入 logo（尺寸≤20%），并兼容中文及 UTF-8 内容，长文本需启用高纠错等级或 URL 编码。
用 JavaScript 生成二维码图片，核心是调用一个轻量、可靠的二维码生成库，把文本内容编码为可视的黑白矩阵图像。最常用且维护活跃的是 qrcode.js（由 node-qrcode 的浏览器适配版本演化而来），它支持直接在 Canvas 或 DOM 中渲染，无需后端参与。
使用 qrcode.js 快速生成 Canvas 二维码
这是最简单直接的方式，适合网页内即时展示：
- 通过 CDN 引入库：
- 创建一个
元素，并指定其 id（如id="qrcode"） - 调用
QRCode.toCanvas()方法，传入 canvas 对象、要编码的文本和可选配置（如大小、纠错等级）
示例代码：
const canvas = document.getElementById('qrcode');
QRCode.toCanvas(canvas, 'https://example.com', { width: 200, errorCorrectionLevel: 'M' }, (error) => {
if (error) console.error('生成失败：', error);
});
生成 base64 图片 URL 用于 img 标签或下载
如果需要将二维码作为图片嵌入
立即学习“Java免费学习笔记（深入）”；
- 使用
QRCode.toDataURL()，返回 Promise，解析后得到 data URL 字符串 - 可直接赋值给
img.src，或创建 a 标签配合download属性触发保存
示例：
QRCode.toDataURL('Hello World', { type: 'image/png', width: 256 })
.then(url => {
document.getElementById('myImg').src = url;
// 或：触发下载
const link = document.createElement('a');
link.download = 'qrcode.png';
link.href = url;
link.click();
});
自定义样式：添加 Logo 或修改颜色（需手动绘制）
基础 qrcode.js 默认只输出黑白模块。若需嵌入 logo 或更换前景/背景色，需先生成 canvas，再用 2D Context 手动覆盖：
- 调用
toCanvas()得到 canvas 后，用getContext('2d')获取绘图上下文 - 遍历 canvas 像素，将黑色模块替换为指定颜色（如深蓝），白色模块设为浅灰
- 用
drawImage()在中心叠加小尺寸 logo 图片（注意缩放与裁剪，避免遮挡关键定位图案）
注意：logo 尺寸建议不超过二维码边长的 20%，否则可能影响扫码识别率。
处理中文、特殊字符与长文本
qrcode.js 默认支持 UTF-8，中文可直接传入，但要注意：
- 长 URL 或含大量参数的字符串可能导致二维码过于密集，降低容错性；建议启用
errorCorrectionLevel: 'H'（最高纠错） - 若内容超长导致生成失败（
Invalid data），可先用encodeURIComponent()对 URL 参数编码，或考虑缩短链接服务 - 非标准字符（如 emoji）部分扫码器兼容性较差，生产环境建议避免使用
