废话不多说,直接上代码
1、安装qrcodejs2
npm install qrcodejs2 --save
2、引入使用
import QRCode from 'qrcodejs2'
3、使用
代码案例
<div class="code" id="code" ref="code"></div>
this.$nextTick(() => { //创建一个div,用来生成二维码 let div = document.createElement('div'); let qrcode = new QRCode(div, { text: updataUrl, width: 150, //图像宽度 height: 150, //图像高度 colorDark: "#000000", //前景色 colorLight: "#ffffff", //背景色 typeNumber: 4, correctLevel:QRCode.CorrectLevel.H }) let logo = new Image(); logo.crossOrigin = 'Anonymous'; logo.src = require("../../assets/favicon.jpg") //生成log图片 logo.onload =() =>{ let container = this.$refs.code; //获取页面上的div,可以document.querySelector()等等方法 if(container.innerHTML != ''){ //获取页面div,有则清除 container.innerHTML =''; }; //获取二维码 let qrImg = qrcode._el.getElementsByTagName('img')[0]; //获取canvas let canvas = qrcode._el.getElementsByTagName('canvas')[0]; console.log('qrImg---',updataUrl) let cxt = canvas.getContext('2d'); //写入logo cxt.drawImage(logo,150*0.5 - 22,150*0.5 - 22,44,44); qrImg.src = canvas.toDataURL(); container.appendChild(qrcode._el) } qrcode.clear() //清除二维码 qrcode.makeCode(updataUrl) //生成另一个新的二维码 })