JavaScript生成二维码推荐使用qrcode.js（轻量快速）或qr-code-styling（支持Logo、颜色、边框等深度定制），避免手动实现复杂编码逻辑。
JavaScript 实现二维码生成并自定义样式，核心是借助成熟的开源库（如 qrcode.js 或 qr-code-styling），前者专注快速生成标准二维码，后者支持图形化定制（Logo、颜色、边框、背景等）。
用 qrcode.js 快速生成基础二维码
这是最轻量、最常用的方式，适合嵌入网页、生成纯黑白或单色二维码。
- 通过 CDN 引入：
- 调用
qrcode.generate()或更推荐的QRCode.toCanvas()/QRCode.toDataURL()（需使用 qrcode.min.js 的增强版，如 node-qrcode 浏览器版） - 示例：在 canvas 中绘制带指定尺寸和纠错等级的二维码
QRCode.toCanvas(document.getElementById('canvas'), 'https://example.com', {
width: 200,
errorCorrectionLevel: 'H' // L/M/Q/H，H 最高容错
}, function (error) {
if (error) console.error(error);
});
用 qr-code-styling 深度自定义样式
如果需要插入 Logo、修改模块形状、设置渐变色、添加背景图或圆角效果，qr-code-styling 是目前最直观的方案。
- CND 引入：
- 创建实例时可配置：颜色（
dotsOptions.color）、背景（backgroundOptions.color）、Logo（image+imageOptions）、边框（cornersSquareOptions/cornersDotOptions）等 - 注意：Logo 图片需同源或开启 CORS；建议尺寸为二维码宽高的 15%~25%，且格式为 PNG（透明背景更自然）
const qrCode = new QRCodeStyling({
width: 300,
height: 300,
data: "https://example.com",
image: "/logo.png",
imageOptions: {
crossOrigin: "anonymous",
margin: 10
},
dotsOptions: {
color: "#4268d3",
type: "rounded" // 也可选 "classical", "extra-rounded"
},
backgroundOptions: {
color: "#f2f6fa"
},
cornersSquareOptions: {
type: "dot" // 左上/右上/左下定位方块样式
}
});
qrCode.append(document.getElementById("qr-container"));
进阶技巧：导出与交互优化
生成后常需下载、响应式适配或点击复制，这些可通过简单 DOM 操作实现：
立即学习“Java免费学习笔记（深入）”；
- 导出 PNG：调用
qrCode.download({ name: "my-qr", extension: "png" }) - 响应式：监听窗口 resize，重新生成（注意防抖）；或用 CSS 设置 canvas 容器
max-width: 100%; height: auto; - 点击复制链接：给二维码容器绑定 click 事件，用
navigator.clipboard.writeText()写入原始 data - 兼容性提示：旧版 Safari 不支持
toBlob()，可降级用toDataURL()+ 创建临时 a 标签下载
不推荐手动实现的几个原因
二维码编码逻辑涉及版本选择、掩码模式、纠错码（Reed-Solomon）计算、数据编组等复杂规则。自行实现极易出错，且难以通过标准校验（如 ZXing 扫描测试）。除非用于学习或极特殊场景，否则应优先选用经过大量验证的库。
