vue生成二维码带图片和文字一键下载

引入qrcode

npm install qrcode --save

创建一个组件qrcode

<template>
    <div id="meQrcode" :title="qrText" :title2="qr2Text">
        <div class="qrcode_box">
            <img class="qrcode_canvas" id="qrcode_canvas" ref="qrcode_canvas" alt="二维码" />
            <img v-if="qrLogo" class="qrcode_logo" ref="qrcode_logo" :src="qrLogo" alt="logo" />
            <canvas :width="qrSize" :height="qrSize" class="canvas" ref="canvas" id="canvas"></canvas>
            <div style="text-align: center;">
				<el-button round size="small" @click="savePic">保存图片</el-button>
			</div>
        </div>
    </div>
</template>
<script>
    import QRCode from "qrcode";
    import logo from "../assets/logo.png";
    export default {
        props: {
            //二维码存储内容
            qrUrl: {
                type: String,
                default: "你不配"
            },
            //二维码尺寸（正方形 长宽相同）
            qrSize: {
                type: Number,
                default: 300
            },
            //二维码底部文字
            qrText: {
                default: ""
            },
			qr2Text: {
			    default: ""
			},
            //二维码中部logo 如果写default: ""则不生成logo
            qrLogo: {
                type: String,
                default: ''
            },
            //logo尺寸（正方形 长宽相同）
            qrLogoSize: {
                type: Number,
                default: 40
            },
            //底部说明文字字号
            qrTextSize: {
                type: Number,
                default: 14
            }
        },
        data() {
            return {};
        },
        methods: {
            /**
              * @argument qrUrl        二维码内容
              * @argument qrSize       二维码大小
              * @argument qrText       二维码中间显示文字
			  * @argument qr2Text       二维码头部显示文字
              * @argument qrTextSize   二维码中间显示文字大小(默认16px)
              * @argument qrLogo       二维码中间显示图片
              * @argument qrLogoSize   二维码中间显示图片大小(默认为80)
              */
            handleQrcodeToDataUrl() {
                let qrcode_canvas = this.$refs.qrcode_canvas;
                let qrcode_logo = this.$refs.qrcode_logo;
                let canvas = this.$refs.canvas;
                const that = this;
                QRCode.toDataURL(
                    this.qrUrl,
                    { errorCorrectionLevel: "H" },
                    (err, url) => {
                        qrcode_canvas.src = url;
                        // 画二维码里的logo// 在canvas里进行拼接
                        let ctx = canvas.getContext("2d");
                        setTimeout(() => {
                            //获取图片
                            ctx.drawImage(qrcode_canvas, 0, 0, that.qrSize, that.qrSize);
                            if (that.qrLogo) {
                                //设置logo大小
                                //设置获取的logo将其变为圆角以及添加白色背景
                                // ctx.fillStyle = "#fff";
                                // ctx.beginPath();
                                // let logoPosition = (that.qrSize - that.qrLogoSize) / 2; //logo相对于canvas居中定位
                                // let h = that.qrLogoSize + 10; //圆角高 10为基数(logo四周白色背景为10/2)
                                // let w = that.qrLogoSize + 10; //圆角宽
                                // let x = logoPosition - 5;
                                // let y = logoPosition - 5;
                                // let r = 5; //圆角半径
                                // ctx.moveTo(x + r, y);
                                // ctx.arcTo(x + w, y, x + w, y + h, r);
                                // ctx.arcTo(x + w, y + h, x, y + h, r);
                                // ctx.arcTo(x, y + h, x, y, r);
                                // ctx.arcTo(x, y, x + w, y, r);
                                // ctx.closePath();
                                // ctx.fill(); qrcode_logo.onload = function () {
                                //     ctx.drawImage(
                                //         qrcode_logo,
                                //         logoPosition,
                                //         logoPosition,
                                //         that.qrLogoSize,
                                //         that.qrLogoSize
                                //     );
                                // }
								
								
								 const image = new Image();
								          image.src = this.qrLogo;
								          image.onload = () => {
											  image.width = 40
											  image.height = 40
								            const x = (canvas.width - image.width) / 2;
								            const y = (canvas.height - image.height) / 2;
								
								            ctx.drawImage(image, x, y,40,40);
											}

                            }
                            if (that.qrText) {
                                //设置字体
                                let fpadd = 10; //规定内间距
                                ctx.font = "bold " + that.qrTextSize + "px Arial";
                                let tw = ctx.measureText(that.qrText).width; //文字真实宽度
                                let ftop = that.qrSize - that.qrTextSize; //根据字体大小计算文字top
                                let fleft = (that.qrSize - tw) / 2; //根据字体大小计算文字left
                                let tp = that.qrTextSize / 2; //字体边距为字体大小的一半可以自己设置
                                ctx.fillStyle = "#fff";
                                ctx.fillRect(
                                    fleft - tp / 2,
                                    ftop - tp / 2,
                                    tw + tp,
                                    that.qrTextSize + tp
                                );
                                ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
                                ctx.fillStyle = "#333";
                                ctx.fillText(that.qrText, fleft, ftop);
                            }
							if (that.qr2Text) {
							    //设置字体
							    let fpadd = 10; //规定内间距
							    ctx.font = "bold " + that.qrTextSize + "px Arial";
							    let tw = ctx.measureText(that.qr2Text).width; //文字真实宽度
							    let ftop = 0; //根据字体大小计算文字top
							    let fleft = (that.qrSize - tw) / 2; //根据字体大小计算文字left
							    let tp = that.qrTextSize / 2; //字体边距为字体大小的一半可以自己设置
							    ctx.fillStyle = "#fff";
							    ctx.fillRect(
							        fleft - tp / 2,
							        ftop - tp / 2,
							        tw + tp,
							        that.qrTextSize + tp
							    );
							    ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
							    ctx.fillStyle = "#333";
							    ctx.fillText(that.qr2Text, fleft, ftop);
							}
                            qrcode_canvas.src = canvas.toDataURL();
                        }, 0);
                    }
                );
 
            },
            //保存图片
            savePic() {
                let a = document.createElement("a")
                //将二维码面板处理为图片
                a.href = this.$refs.canvas.toDataURL("image/png", 0.5);
                a.download = this.qr2Text + ".png"
				this.$message.success("图片下载成功！")
				
                a.click()
			
            },
        },
        mounted() {
            this.handleQrcodeToDataUrl();
        },
        updated() {
            this.handleQrcodeToDataUrl();
        },
    };
</script>
<style scoped>
    .qrcode_box,
    #meQrcode {
        display: inline-block;
    }
 
    .qrcode_box img {
        display: none;
    }
</style>

引入组件

import QrItem from '@/components/qrcode.vue'

放到页面中

	<qr-item  :qr2Text='qrCode2Text' :qrUrl="qrCodeImagePath" :qrSize="200"></qr-item>

就可以直接生成了！！