vue使用qrcodejs2生成带log的二维码图片，vue生成二维码图片中间带log，自定义log

安装插件

npm install qrcodejs2 --save

在页面中引入

import QRcode from 'qrcodejs2'

普通的二维码

此处的id就是页面中要展示二维码容器的id     
this.qrImg = new QRcode('id', {
     text: "https://73476077569",//要转化成二维码的地址（一般是网址）
     width: 150,//二维码宽度
     height: 150,//二维码高度
     colorDark: '#000000',//二维码颜色
     colorLight: '#ffffff',//二维码背景颜色
});

带有图片的二维码

  this.$nextTick(() => {
            //和普通二维码区别在于这里需要创建一个div放置不带图片的二维码
            let div = document.createElement('div');
            this.qrImg = new QRcode(div, {
                 text: "https://sun.com/Code?sid=573476077569",
                 width: 150,
                 height: 150,
                 colorDark: '#000000',
                 colorLight: '#ffffff',
              });

            //加工要显示的图片
            let logo = new Image();
            logo.crossOrigin = 'Anonymous';
            // 填入你本地log图片
            logo.src = require("@/assets/logo.png") 
            logo.onload = () => {


            //获取页面上展示二维码的容器并清空
            let container = document.getElementById('grantCode');
            if (container.innerHTML != "") {
             // 有则清空已存在的
                container.innerHTML = ""
             }

             //将没有图片的二维码与照片合并在一起
             // 获取二维码
             let qrImg = this.qrImg._el.getElementsByTagName('img')[0]; 
             // 获取canvas
             let canvas = this.qrImg._el.getElementsByTagName('canvas')[0]; 
             let ctx = canvas.getContext("2d");
             // 写入log
             ctx.drawImage(logo, 150 * 0.5 - 22, 150 * 0.5 - 22, 44, 44); 
             //将图片转化成链接地址
             qrImg.src = canvas.toDataURL();
             //将生成有图片的二维码追加到页面二维码容器中
             container.appendChild(this.qrImg._el);
             }

          })

这里是看【Vue】vue项目用qrcodejs2生成带log的二维码图片，vue生成二维码图片中间带log，自定义log_vue qrcodejs2_阿民不加班的博客-CSDN博客

这篇文章写的，cv的过程遇到以下2个问题
1.就是没有看明白在生成带有图片二维码是 是要新创建一个容器，直接使用了页面div导致清空时候再获取canvas报错

2.this.$nextTick和logo.onload是需要加上的否则就会出现，一会有图片一会没有图片