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

原创已于 2022-08-09 18:52:38 修改 · 9.6k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #vue.js #chrome

于 2021-03-03 11:23:50 首次发布

本文介绍了一个使用qrcode.js生成二维码并将其绘制到canvas时遇到的问题。在特定设备上，由于png格式不兼容导致二维码无法显示。通过将图片格式从png转换为jpg解决了此问题。

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.youkuaiyun.com'
          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>