vue生成二维码中间自定义logo并截图分享

需求描述：在公众号中，生成二维码，并在二维码中央添加自定义logo，然后生成一张分享给好友的 二维码图片。

一、用到的依赖包

npm install --save html2canvas
<script src='https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<template>
	<div>
		<div class="userBox">
			<div id='qrcode'></div>
		</div>
		<el-dialog :visible="dialogTableVisible" width="90%" @close="closeDialog" top="10vh">
            <img src="../../image/close-btn.png" class="close-btn" @click="closeDialog" alt="">
            <div v-if="!shareQrImg" class="qr-bg" id="qrBg" >
                <h2>关注公众号开启平台功能</h2>
                <div id="imgContainer" class="imgContainer"></div>
                <span>长按二维码，分享给好友！</span>
                <img src="../../image/dialog-bg.png" class="qr-bg-img" alt="">
            </div>
            <!--这个img 标签，可以在手机端长按分享图片-->
            <img v-else :src="shareQrImg" alt="" style="width: 326px; height: 467px;">
        </el-dialog>
	</div>
</template>

<script>
	data () {
		return {
			canvas: null,
            canvaswidth: 0,
            canvasheight: 0,
            // 二维码宽高
            qrcodewidth: 400,
            qrcodeheight: 400,
            qrcodeTopOffset: 59,
            dialogTableVisible: false,
            shareQrImg: ''
		};
	},
	async created() {
		//canvas宽高
		this.canvaswidth = this.qrcodewidth;
		this.canvasheight = this.qrcodeheight + this.qrcodeTopOffset + 50;
	},
	methods: {
		closeDialog () {
			this.dialogTableVisible = false;
			$('#imgContainer').empty();
			$('#qrcode').empty();
			this.shareQrImg = '';
			this.canvas.width = this.canvaswidth;
			this.canvas.height = this.canvasheight;
			var ctx = this.canvas.getContext('2d');
			ctx.clearRect(0, 0, this.canvaswidth, this.canvasheight);
		},
		//解决中文乱码问题
		toUtf8(str) {
			var out, i, len, c;
			out = "";
			len = str.length;
			for (i = 0; i < len; i++) {
				c = str.charCodeAt(i);
				if ((c >= 0x0001) && (c <= 0x007F)) {
					out += str.charAt(i);
				} else if (c > 0x07FF) {
					out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
					out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
					out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
				} else {
					out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
					out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
				}
			}
			return out;
		},
		initQrCodeImg (url) {
			try {
				//二维码宽高
				//logo宽高
				var logowidth = 84;
				var logoheight = 84;
				//文字描述位置
				var textleft = this.qrcodewidth / 2;
				var texttop = 39;
				//logo位置
				var logoleft = (this.qrcodewidth - logowidth) / 2;
				var logotop = (this.qrcodeheight - logoheight) / 2 + this.qrcodeTopOffset;
				const qrcode = $('#qrcode');
				qrcode.qrcode({
					render : 'canvas',
					text : this.toUtf8(url),
					width : this.qrcodewidth,
					height : this.qrcodeheight,
					background : '#ffffff',
					foreground : '#000000',
				});
				this.canvas = qrcode.find('canvas').get(0);
				var img = new Image();
				img.crossOrigin = 'anonymous';
				img.src = this.canvas.toDataURL('image/png');
				img.onload = () => {
					this.canvas.width = this.canvaswidth;
					this.canvas.height = this.canvasheight;
					var ctx = this.canvas.getContext('2d');
					//设置画布背景
					ctx.fillStyle = 'transparent';
                    ctx.fillRect(0, this.qrcodeTopOffset, this.canvas.width, this.canvas.height);
                    //设置文字样式
                    ctx.fillStyle = '#7E7E7E';
                    ctx.font = '400 ' + 29 + 'px PingFangSC, PingFang SC';
                    ctx.textAlign = 'center';
                    //文字描述
                    ctx.fillText("AD中台，您的高效拍档！", textleft, texttop);
                    ctx.fillStyle = '#BBBBBB';
                    ctx.font = '400 ' + 26 + 'px PingFangSC, PingFang SC';
                    ctx.textAlign = 'center';
                    //文字描述
                    const date = new Date(Date.now() + 7 * 86400000);
                    const month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
                    const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                    ctx.fillText(`有效期至${date.getFullYear()}-${month}-${day}`, textleft, this.qrcodeTopOffset + this.qrcodeheight + 42);
                    //绘制二维码
                    ctx.drawImage(img, 15, this.qrcodeTopOffset + 12, this.canvaswidth - 30, this.canvasheight - 120);
                    //设置logo
                    var logo = new Image(logowidth, logoheight);
                    logo.src = '../../image/qr-logo.png';
                    logo.onload = () => {
                    	ctx.drawImage(logo, logoleft, logotop, logowidth, logoheight);
	                    this.dialogTableVisible = true;
                        this.$nextTick(() => {
							var image = new Image();
							image.crossOrigin = 'anonymous';
                            image.classList.add('imgContainer');
                            image.src = this.canvas.toDataURL('image/png');
                            document.getElementById('imgContainer').appendChild(image);
                            // 替换为目标元素的id或class
                            const element = document.getElementById('qrBg');
                            html2canvas(element, {
								backgroundColor: null,
                                scale: 7.5,
                                height: element.scrollHeight - 1,
                                width: element.scrollWidth - 2,
                                dpi: window.devicePixelRatio * 2, //设备像素比
                                x: 1
                            }).then((canvas) => {
								const image = canvas.toDataURL('image/png');
								this.shareQrImg = image;
							});
						});
					}
				}
			} catch (e) {
				console.error(123, e);
			}
		},
	}
</script>
<style>
	.imgContainer {
        width: 176px;
	}
    #qrcode {
        display: none;
        position: absolute;
        top: 0px;
        left: -500px;
    }
    .el-dialog {
        background-color: transparent;
        box-shadow: none;
    }
    .el-dialog__body {
        display: flex;
        justify-content: center;
        padding: unset;
    }
    .el-dialog__headerbtn {
        display: none;
    }
    .qr-bg {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 326px;
        height: 467px;
        background-color: transparent;
    }
    .qr-bg .qr-bg-img {
        position: absolute;
        width: 326px;
        height: 467px;
        z-index: -1;
    }
    .qr-bg h2 {
        margin-top: 117px;
        font-family: PingFangSC, PingFang SC;
        color: #000000;
        font-weight: 600;
        font-size: 18px;
    }
    .qr-bg span {
        margin-top: 11px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #3E8BFD;
    }
</style>