h5链接转二维码在部分手机上无法长按识别

110 阅读1分钟

问题:最近在弄h5时发现 部分手机上长按识别不了二维码

解决思路:1.先用链接转换成二维码 2.将转换的二维码转换成base64 3.隐藏qcode dom用base64显示二维码

这里链接转二维码图片用的插件是qrcodejs

主要代码

 <div v-if="showCanvas" id="qcode" class="qcode canvas"></div>
<figure v-if="wechatImg" class="wechat-img">
    <img :src="wechatImg" />
</figure>

  /* eslint-disable no-new */
  new window.QRCode('qcode', {
    width: 200,
    height: 200,
    text: this.codeUrl,
    colorDark: '#000',
    colorLight: '#fff',
    correctLevel: 1,
  })

  const qr = document.getElementsByTagName('canvas')[0].toDataURL('image/png')
  this.wechatImg = qr
  this.showCanvas = false