undefinedfix
Sign in

QRcode draw two-dimensional code real machine does not display?

icsllaf edited in Sun, 07 Aug 2022

hello everyone. I use it qrcode.js Generate a two-dimensional code, draw it on canvas, and then convert it into Base64 with the todataurl method of canvas, which is displayed on the page as the SRC attribute of img tag. There is no problem in the chrome developer tool and wechat developer tool, but when I get it tested on a real machine, my Xiaomi 8 doesn't display the QR code. Another colleague's apple 7 displays two-dimensional code, so there is no other machine to test.

The code is as follows

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 )                                                 
            }                
        }

I'm still at the primary level. I don't know how to solve this situation. No one around me can ask for advice. I hope you can give me more advice.

4 Replies
user618844
commented on Sun, 07 Aug 2022

The probability is that the Src in the IMG tag is empty after the QR code is generated. //Put the code behind the event queue. 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);

SpenserWilson1
commented on Sun, 07 Aug 2022

QRcode will create an array according to the width and height when generating the two-dimensional code, so the width and height of the two-dimensional code must be integers. If a decimal is passed in, the two-dimensional code cannot be generated when creating the array. You can check whether this is the reason

silentPlanet
commented on Sun, 07 Aug 2022

The following is my project used to automatically generate two-dimensional code according to the URL , Paste it here to show you , I hope it helps you a little bit.

<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>
lihek
commented on Sun, 07 Aug 2022

Solved, pro test effective!!! I also met this problem. I searched many articles on the Internet but didn't mention it. Finally, I solved it by myself

(1) Analysis of the reasons:

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

(2) Solution:

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

Details = > [step on the pit] qrcodejs generates two-dimensional code, the real machine does not display https://blog.csdn.net/Jinkerr/article/details/114303832

lock This question has been locked and the reply function has been disabled.