这篇文章主要是分享下自己的收获，也是自己遇到的问题：
前端如何自己生成二维码？前端如何将生成的二维码转成图片并展示？如何控制二维码的显隐？
话不多说，直接上干货
base64如何转换成图片
npm install qrcodejs2 //生成二维码的包
npm install html2canvas //转为图片格式的包
重点部分1：
//`生成二维码部分`new QRCode(this.$refs.qrCodeDiv,{ text:"http://19*.16*.12*.2*:8080/#/login" + this.work_point.id, //text为转换为二维码的文本，可以是所有东西：图片、文本、电话、链接等等 width:300, //生成二维码的宽度 height:300, //生成二维码的高度 colorDark:'#333333', // 二维码颜色 colorLight:'#eeefff', //二维码背景颜色 // correctLevel:QRCode.correctLevel.L, //容错率 ，L/M/H }),
重点部分2：
html2canvas(this.$refs.qrCodeDiv, { backgroundColor: null, width: 300, height: 300 }).then(canvas => { var imgData = canvas.toDataURL('image/jpeg') //这里转为图片方式 `[base64转图片并显示](https://blog.csdn.net/weixin_45527702/article/details/117324946)` console.log(typeof(imgData)) console.log("imgData") this.imgData = imgData //this.imgData是需要自己在data中定义，进而来接参 })
整体代码：
//`template中写`<div id="qrcode"><div id="qroode" class="qrconde" ref="qrCodeDiv" v-if="imageDta == ''"></div></div>//`data中定义`this.imgData : "",//`style中设置css`#qroode{ width: 300px; height: 300px; margin: auto; }//`script中导入包` -------`在需要的页面直接导入即可`import QRcode from "qrcodejs2"import html2canvas from "html2canvas"//`methods中定义函数`get_qrcode(){ //生成工点二维码 及验证密码 --- 前端 if(this.project.org_type === 5) { //附加条件：什么条件下生成二维码 new QRCode(this.$refs.qrCodeDiv,{ text:"http://19*.16*.12*.2*:8080/#/login" + this.work_point.id, //text为转换为二维码的文本，可以是所有东西：图片、文本、电话、链接等等 width:300, //生成二维码的宽度 height:300, //生成二维码的高度 colorDark:'#333333', // 二维码颜色 colorLight:'#eeefff', //二维码背景颜色 // correctLevel:QRCode.correctLevel.L, //容错率 ，L/M/H }), this.createPicture() //转换图片 }else{ this.$notify({ title:"温馨提示", type:"warning", message:this.$createElement("i",{style:"color:orange"},"请选择工点"), }) } }, createPicture(){ //二维码转为图片 ---前端 html2canvas(this.$refs.qrCodeDiv, { //设置图片的背景颜色、宽度、高度 backgroundColor: null, width: 300, height: 300 }).then(canvas => { var imgData = canvas.toDataURL('image/jpeg') //这里转为图片方式 console.log(typeof(imgData)) console.log("imgData") this.imgData = imgData }) }, clear_qrcode(){ //清除二维码 ---前端 const codehtml = document.getElementById("qrcode"); codehtml.innerHTML = "" },
最后留言：若有不懂或不对之处，欢迎在评论区留言！！！
