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'
            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
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 (){

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


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

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.

  <div v-padding="10">
    <div class="qrcode_box">
      <canvas ref="canvas" class="qrcode"></canvas>
import QRCode from "qrcode";
export default {
  data() {
    return {};
  props: {
    params: Object
  methods: {
    generateQrCode() {
      let canvas = this.$refs.canvas;
      let domain = G.get("env").fileOsAddr;
        function(error) {
          if (error) this.$Message.error("生成二维码失败.请重新生成!");
    backTrainPlan() {
        name: "trainplan"
    init() {
  mounted() {
  components: {
    QRCode: QRCode
<style lang="less" scoped>
.qrcode_box {
  width: 350px !important;
  height: 350px !important;
  margin: auto;
  .qrcode {
    width: 350px !important;
    height: 350px !important;
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:


(2) Solution:

 `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.