使用vue-qr生成带中间带图片的二维码

1.安装

npm install vue-qr --save

2.在页面中使用

• logoSrc：二维码中间的logo图
• size：图片尺寸
• text：二维码地址或内容
• margin：二维码图片的空白边距大小
• callback：生成后的回调函数，可获取二维码base64格式的图片数据
• logoScale：设置logo大小的属性，默认0.2（产品说logo太小，于是我设置成了0.3，结果扫码无法识别…于是又改回了默认值）

<vue-qr ref="Qrcode" :logoSrc="imgUrl" :text="codeUrl" :size="200" :margin="10" :callback="callback" qid="testQrId"></vue-qr>
<a :href="exportLink" @click="downloadImg" :download="downloadFilename">下载二维码</a>

import VueQr from 'vue-qr'

components:{
    VueQr
},

data(){
    return{
   		codeUrl: '我好看吗？', // 二维码地址或内容
        imgUrl:'', // 二维码中间的logo图
        exportLink: '',
        downloadFilename: '', //下载的图片文件名
    }
},
methods:{
	// 回调函数
    callback(dataUrl, id) {
        console.log(dataUrl) // 生成的base64格式的二维码图片数据
        // console.log(id)
    },
    // 下载二维码图片
    downloadImg () {
        let Qrcode = this.$refs.Qrcode
        this.exportLink = Qrcode.$el.currentSrc
        console.log(Qrcode, this.exportLink, "test");
        this.downloadFilename = '二维码'
    }
}

3.我的项目完整代码

<template>
    <div class="main">
        <div class="box">
            <!-- <img class="qrcode" src="~@/assets/img/code.png" alt=""> -->
            <vue-qr class="qrcode" ref="Qrcode" :logoSrc="imgUrl" :text="codeUrl" :size="172" :margin="10" :callback="callback" qid="testQrId"></vue-qr>
            <div class="text">
                <img class="icon" src="~@/assets/img/icon_check01.png" alt="">
                <span class="span">长按保存到手机</span>
            </div>
        </div>
    </div>
</template>

import VueQr from 'vue-qr'
export default {
    components:{
        VueQr
    },
    data(){
        return{
            codeUrl: '', // 二维码的地址或内容
            imgUrl:'', // 二维码中间的logo图
            exportLink: '',
            downloadFilename: '',
            id: '',
            url: '',
        }
    },
    created(){
        this.getCode();
    },
    methods:{
        // 获取二维码信息
        getCode(){
            var href = window.location.href;
            this.url = href.substring(0,href.lastIndexOf("/"));
            getCode().then((res) => { 
                if(res.status == 200) {
                    this.id = res.data; // 获取后台返回的id
                    this.codeUrl = this.url + '/record?id=' + this.id; // 我的二维码地址
                    console.log(this.codeUrl,"codeUrl");
                }
            })
        },
        // 回调函数
        callback(dataUrl, id) {
            console.log(dataUrl) // 生成的base64格式的二维码数据
            // console.log(id)
        },
    }
}
</script>