qrcode 绘制二维码真机不显示？

Question

大家好。我用 qrcode.js 生成二维码，画在 canvas 上，然后用 canvas 的 toDataUrl 方法转换成 base64 ，作为 img 标签的 src 属性，展示在页面上。在 chrome 开发者工具和微信开发者工具中都没问题，但是拿到真机上测试，我的小米8 就不显示二维码。还有台同事的苹果7是显示二维码的，再就没有别的机器可以测试了。

代码如下

function drawImage() {                        
            let canvasElement = document.querySelector('#canvas');                      
            let context = canvasElement.getContext('2d'); 
            var imageObj = new Image();   
            imageObj.onload = drawImageActualSize;                                   
            imageObj.src = './static/imgs/food1.jpg'
            imageObj.setAttribute("crossOrigin",'Anonymous')
            function drawImageActualSize() {                
                let startx = (canvasElement.width - imageObj.width) / 2                
                let starty = (canvasElement.height - imageObj.height) / 4          
                context.drawImage(this, startx, starty);                     
                drawQrcode(context, startx, canvasElement.height - 110)           
                let imgData = canvasElement.toDataURL("image/jpeg");                    
                let imgDiv = `<img src=${imgData} style="height: 100%;" />`                                                
                document.querySelector('.img-wrapper').insertAdjacentHTML( 'beforeend', imgDiv )                                                 
            }                
        }

小弟还是初级水平，遇到这种情况也不知到如何解决，身边也没人可以请教，还望大家多多指点。

Answer 1

大概率是在生成二维码之后的img标签中的src为空。
//把代码放到事件队列后面
setTimeout(function(){

//检测一下如果img标签里面的src没有base64就进行下面操作
if(!$("#qrcodeConIn img").attr("src")){
    $("#qrcodeConIn img").show();
    $("#qrcodeConIn canvas").hide();
    var canvas = $("#qrcodeConIn canvas")[0];
    var dataURL = canvas.toDataURL("image/png");
    $("#qrcodeConIn img").attr("src",dataURL);
}

},0);

Answer 2

qrcode在生成二维码的时候会按宽高创建一个的数组，
所以二维码的宽高必须为整数，如果传入的是小数，在创建数组时会，造成无法生成二维码。
你可以在检查下是不是这个原因

Answer 3

下面是 我项目中用到的 根据url自动生成二维码的, 粘贴过来 给你看下,希望对你有点帮助。

<template>
  <div v-padding="10">
    <div class="qrcode_box">
      <canvas ref="canvas" class="qrcode"></canvas>
    </div>
  </div>
</template>
<script>
import QRCode from "qrcode";
export default {
  data() {
    return {};
  },
  props: {
    params: Object
  },
  methods: {
    //生成二维码
    generateQrCode() {
      let canvas = this.$refs.canvas;
      let domain = G.get("env").fileOsAddr;
      QRCode.toCanvas(
        canvas,
        `${domain}/qrTrain/index.html?planId=${this.params.planId}&location=${
          this.params.orgId
        }`,
        function(error) {
          if (error) this.$Message.error("生成二维码失败.请重新生成!");
        }
      );
    },
    //返回培训首页
    backTrainPlan() {
      this.$router.push({
        name: "trainplan"
      });
    },
    init() {
      this.generateQrCode();
    }
  },
  mounted() {
    this.init();
  },
  components: {
    QRCode: QRCode
  }
};
</script>
<style lang="less" scoped>
.qrcode_box {
  width: 350px !important;
  height: 350px !important;
  margin: auto;
  .qrcode {
    width: 350px !important;
    height: 350px !important;
  }
}
</style>

Answer 4

已解决，亲测有效！！！
这个问题我也遇到这个问题，网上搜了很多文章都没有提到，最后自己踩坑解决了

（1）分析原因：

 由于qrcode.js自带生成的base64图片是png格式，然而部分真机可能无法将png图片绘制进canvas。

（2）解决方法：

 将qrcode.js生成的png图片再转成jpg格式，然后再绘制进去canvas就可以解决了
 `let qrcJpg = canvas.toDataURL('image/jpeg')`
 

详细内容 => 【踩坑】qrcodejs生成二维码真机不显示 https://blog.csdn.net/Jinkerr/article/details/114303832