vue 前端生成二维码，并转换为图片

vue 前端生成二维码，并转换为图片

~牧马~

于 2021-05-27 15:08:03 发布

2760
 收藏 7
分类专栏： vue 文章标签： vue 生成二维码 自动生成的二维码转图片
版权

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

前端如何自己生成二维码？
前端如何将生成的二维码转成图片并展示？
如何控制二维码的显隐？
话不多说，直接上干货
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
                }),
1

重点部分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 = ""
        },

————————————————
版权声明：本文为CSDN博主「~牧马~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45527702/article/details/117328521