【踩坑】qrcodejs生成二维码真机不显示（解决部分机型二维码绘制失败）

这个问题我也遇到了，网上搜了很多文章都没有提到，最后自己踩坑解决了1) 问题描述：使用qrcode.js生成base64二维码图片并绘制进canvas，然而仅在电脑调试和部分真机都没问题，但是某些真机就会显示不了……2) 分析解决：由于qrcode.js自带生成的base64图片是png格式，部分真机可能无法将png图片绘制进canvas。解决方法：将qrcode.js生成的png图片再转成jp

Jinkerr

7836人浏览 · 2021-03-03 11:23:50

Jinkerr · 2021-03-03 11:23:50 发布

crossorigin最近，遇到一个用qrcode.js生成二维码绘制海报失败的问题，在网上搜了很多文章都没查到，最后自己踩坑解决了……

1、问题描述：
用qrcode.js生成base64二维码图片绘制进canvas画布，在电脑浏览器和部分真机调试都没问题，然而在某些真机就会显示不了二维码……

2、分析原因：
经过一系列踩坑后，发现qrcode.js自带生成的base64图片是png格式，然而部分真机存在无法将png图片绘制进canvas的情况，导致base64的png图片绘制失败，无法显示二维码。

3、解决方法：

将qrcode.js生成base64的png图片再转成jpg格式后，再绘制进canvas就可以正常显示啦~

核心代码：

1. 安装qrcode.js

npm install qrcode

2. html

<template>
    <div class="qrcode" id="qrCodeUrl" ref="qrCodeUrl"></div>
</template>

3. js

<script>
import QRCode from 'qrcodejs2'
export default {
    methods: {
        drawQrc() {
          let _this = this
          this.textUrl = 'https://www.csdn.net'
          var qrcode = new QRCode(this.$refs.qrCodeUrl, {
              text: _this.textUrl, // 需要转换为二维码的内容
              width: 200,
              height: 200,
              colorDark: '#000000',
              colorLight: '#ffffff',
              correctLevel: QRCode.CorrectLevel.H
         })
         console.log('-qrcode', qrcode)
         setTimeout(() => {
             let qrCanvs = document.querySelector('#qrCodeUrl > canvas')
             let qrcBase64 = qrCanvs.toDataURL('image/jpeg')  /* 转成jpg */
             let qrcImg = new Image()
             // qrcImg.setAttribute("crossOrigin", "Anonymous");
             qrcImg.crossOrigin = 'anonymous'
             qrcImg.src = qrcBase64
             qrcImg.style = 'display:block; width:0; height:0'
             qrcImg.id = 'qrcImg'
             document.body.appendChild(qrcImg)
             qrcImg.onload = function() {
                 setTimeout(() => {
                     _this.ctx.drawImage(qrcImg, 528, 1056, 134, 134)
                     document.querySelector('#qrcImg').remove()
                 }, 50)
             }
         }, 500)
    }
}

</script>