使用qrcodejs生成二维码后获取base64编码为空该如何处理？

问题原因 #

1. 二维码生成属于异步操作：qrcodejs 实例化后会先初始化DOM结构，再异步完成二维码绘制、将canvas内容转为base64赋值给img元素的全流程。你在实例化后同步执行console.log(qrcode._el.children[1].currentSrc)时，img的src还未完成赋值，因此返回空值。
2. 依赖内部私有属性稳定性差：_el是库的内部私有属性，不同版本的内部DOM结构可能存在差异，直接通过children[1]索引元素很可能取错目标节点，也会导致取值为空。

获取二维码base64的方法 #

• 方法1：等待渲染完成后读取img属性
  加极短的异步延迟等待渲染完成，直接在挂载节点下查询img元素即可，不需要依赖库的内部属性命名：

  var qrcode = new QRCode("qrcode", {
    text: "http://jindo.dev.naver.com/collie",
    width: 128,
    height: 128,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
  });
  
  setTimeout(() => {
    const qrImg = document.getElementById('qrcode').querySelector('img');
    console.log(qrImg.src);
  }, 10)
  

• 方法2：从canvas元素直接转换（更稳定）
  二维码会优先绘制在canvas元素上，你可以直接获取canvas节点调用toDataURL方法转base64，不需要等待img元素赋值，兼容性更好：

  const qrCanvas = document.getElementById('qrcode').querySelector('canvas');
  const qrBase64 = qrCanvas.toDataURL('image/png');
  console.log(qrBase64);
  

内容的提问来源于stack exchange，提问作者龍が如く