这篇文章主要是分享下自己的收获，也是自己遇到的问题：

1. 前端如何自己生成二维码？
2. 前端如何将生成的二维码转成图片并展示？
3. 如何控制二维码的显隐？

话不多说，直接上干货
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 = ""
        },

最后留言：若有不懂或不对之处，欢迎在评论区留言！！！