Layui本身不支持条形码，也不原生支持带Logo的高清矢量二维码；必须引入第三方库，且qrcode.js或qrcode-generator无法满足矢量+Logo双重要求，得用qrcode-svg或canvas手动合成。
直接说结论：Layui 本身不支持条形码，也不原生支持带 Logo 的高清矢量二维码；必须引入第三方库，且「qrcode.js」或「qrcode-generator」无法满足矢量 + Logo 双重要求，得用 qrcode-svg 或 canvas 手动合成。
layui 里为什么不能直接用 qrcode.js 生成带 Logo 的二维码
qrcode.js 的 render 方法只接受 DOM 元素（如 <div>），内部直接调用 appendChild 插入 <canvas> 或 <table>，它不返回任何可操作对象，也无法在绘制后叠加图片。所以即使你手动把 logo <img> 放进去，也会被覆盖或错位——它根本不预留 logo 插槽。
- qrcode.js 不支持
logoSrc、logoWidth等参数 - 它生成的 canvas 是“一次性渲染”，没有上下文（context）暴露给你二次绘图
- 若强行用 CSS 定位 logo 盖在 canvas 上，长按保存时 logo 不会一起导出（因为不是 canvas 内容）
怎么用 canvas 合成带 Logo 的高清二维码（推荐方案）
核心思路：先用 qrcode-generator 或 QRCode.toCanvas 生成原始二维码 canvas，再用 drawImage 把 logo 图片居中贴上去，最后转成 toDataURL 或 toBlob 供 <img> 使用。这样导出的是完整像素图，支持长按保存。
- logo 图片需提前加载完成（用
new Image()+onload），避免drawImage绘制空白 - logo 尺寸建议设为二维码边长的 20%–30%，过大影响扫码率；可用
Math.min(qrSize * 0.25, logoImg.naturalWidth)动态缩放 - 务必设置 canvas 的
width和height属性（不是 CSS），否则导出模糊；例如canvas.width = canvas.height = 300 - 导出 PNG 比 JPEG 更清晰（无损），用
canvas.toDataURL('image/png', 1)确保最高质量
示例关键代码：
立即学习“前端免费学习笔记（深入）”；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = canvas.height = 300;
<p>// 1. 生成二维码（以 qrcode-generator 为例）
QRCode.draw(text, { width: 300, height: 300, correctLevel: QRCode.CorrectLevel.H }, (canvasEl) => {
ctx.drawImage(canvasEl, 0, 0);</p><p>// 2. 加载并绘制 logo
const logo = new Image();
logo.onload = () => {
const size = 300 * 0.25;
ctx.drawImage(logo, (300 - size) / 2, (300 - size) / 2, size, size);
const img = document.getElementById('qr-output');
img.src = canvas.toDataURL('image/png', 1); // 高清 base64
};
logo.src = '/static/logo.png';
});layui 表格里动态渲染带 Logo 的二维码要注意什么
表格单元格是异步挂载的，done 回调触发时，templet 返回的字符串刚插入 DOM，但此时还不能立即操作 canvas——必须等下一帧（setTimeout(() => {}, 0)）或监听 layui.table.on('rendered')（Layui 2.8+）。
- 每个单元格容器必须是空的
<div class="qr-container" data-text="{{d.url}}"></div>，不能是<p>或带文字的标签 - 避免重复初始化：检查
$cell.find('img').length === 0或加data-rendered="true"标记 - 重载表格（
table.reload()）后，老的<img>会被销毁，必须在每次done中重新执行合成逻辑 - 不要用
layui.qrcode（官方扩展），它底层仍是 qrcode.js，不支持 logo，且与 jQuery 版本易冲突
条形码在 layui 里怎么快速实现
Layui 没有内置条形码能力，也不能靠 qrcode 类库解决——条形码（如 Code128、EAN-13）和二维码算法完全不同。最轻量可行的是引入 jsbarcode，它支持 SVG 输出，天然高清、可缩放、无锯齿，且体积小（gzip 后约 12KB）。
- 引入后直接调用
JsBarcode("#barcode-el", "123456789012", { format: "CODE128", displayValue: false }) - 容器必须是空的
<svg id="barcode-el"></svg>，jsbarcode会往里写<g>元素 - SVG 可直接设 CSS
width: 100%; height: auto响应式缩放，打印时依然清晰 - 若需导出为图片，用
canvg渲染 SVG 到 canvas 再转 dataURL，或服务端生成（更稳妥）
注意：jsbarcode 不支持中文内容，纯数字/字母编码才可靠；含字母时确保格式选对（如 CODE128 支持全 ASCII，ean13 只支持 13 位数字）。
真正容易被忽略的是：**矢量 ≠ 自动高清**。SVG 或 canvas 宽高设太小（比如 100px），再怎么缩放打印也是模糊的；必须按实际使用场景反推最小物理尺寸（如打印需 300dpi × 1inch = 300px），然后从这个尺寸开始设计 canvas 或 SVG 大小。
