如何使用qrcodejs库生成带自定义logo的二维码

你已经配置了correctLevel : QRCode.CorrectLevel.H最高纠错等级，这是实现加logo的前提，最高纠错等级允许二维码最多30%的区域被遮挡，刚好可以放下居中的logo，不需要引入其他库，下面是两种可行的实现方式：

方式1：Canvas绘制方案（支持导出带logo的二维码图片） #

qrcodejs默认会生成canvas元素作为渲染源，你可以直接在二维码渲染完成后在canvas上叠加绘制logo，代码直接在你现有逻辑后追加即可：

var qrcode = new QRCode(re, {
    text: inp.value,
    width: 200,
    height: 200,
    colorDark : "#5868bf",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

// 新增以下逻辑
qrcode._el.addEventListener('qrcoderendered', () => {
  const canvas = qrcode._el.querySelector('canvas');
  const ctx = canvas.getContext('2d');
  const logo = new Image();
  // 如果logo是跨域资源，添加下面这句避免跨域报错
  // logo.crossOrigin = 'anonymous';
  logo.src = '你的logo资源路径（本地路径/base64均可）';
  
  logo.onload = () => {
    // logo尺寸建议为二维码宽度的1/4左右，不要超过1/3
    const logoSize = canvas.width * 0.25;
    // 计算logo居中坐标
    const logoPosX = (canvas.width - logoSize) / 2;
    const logoPosY = (canvas.height - logoSize) / 2;

    // 可选：绘制logo白色外边框，避免和二维码深色块融合
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(logoPosX - 6, logoPosY - 6, logoSize + 12, logoSize + 12);
    // 绘制logo
    ctx.drawImage(logo, logoPosX, logoPosY, logoSize, logoSize);

    // 可选：如果需要把生成的带logo二维码同步到img标签显示，加这句
    // qrcode._el.querySelector('img').src = canvas.toDataURL('image/png');
  }
})

方式2：CSS定位方案（无需操作canvas，实现更简单） #

如果不需要导出带logo的二维码图片，仅做页面展示用，直接用CSS堆叠即可：

1. 给二维码外层容器添加相对定位
2. 新增logo元素设置绝对定位，居中放置在二维码上方即可，示例代码：

<!-- 外层容器 -->
<div style="position: relative;width: fit-content;">
  <!-- 二维码挂载节点 -->
  <div id="qrcode"></div>
  <!-- 自定义logo -->
  <img 
    src="你的logo路径" 
    style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 50px;height: 50px;border: 3px solid #fff;border-radius: 4px;"
  >
</div>

注意事项 #

• logo总尺寸（含边框）不要超过二维码总面积的30%，否则可能影响扫码识别
• 如果logo是透明背景，一定要加白色外边框，避免和二维码深色块重合导致识别失败

内容的提问来源于stack exchange，提问作者user15753189