vue中使用qrcode+canvas将二维码和图片合成分享海报

背景：需求是在web端生成一张带有二维码的分享海报，用户可以将海报图片保存到本地。
实现思路： 使用qrcode生成二维码图片，再使用canvas将二维码和海报背景合成一张图片；

直接看代码
👇

// 按钮
                <button v-else class="btn-default btn-share" @click.stop="sharePopup">
                    <span>打开分享图片</span>
                </button>

// 遮盖层和海报部分
            <!-- 遮盖层 -->
            <div v-if="showSharePopup" class="cover">
                <!-- 关闭按钮 -->
                <span class="close" @click="closeSharePopup">✖️</span>
            </div>
            <!-- 二维码 -->
            <canvas v-show="false" id="canvas" />
            <!-- 海报 -->
            <canvas v-show="showSharePopup"
                id="myCanvas"
                width="200"
                height="100" />

import QRCode from 'qrcode';
	data() {
            // 销售侧点击分享图片
            showSharePopup: false,
            posterHtmlBg: require('@/images/web/crm-close-order.png'), // 背景图
            // 二维码的dataUrl
            qrcodeUrl: '',
            // 生成二维码的url
            creatCodeUrl: 'xxxxxxxxxxxxxxxxxxxx',
	}

        async sharePopup() {
            this.showSharePopup = true;
            await this.createQrcode(this.creatCodeUrl);
            this.drawAndShareImage(this.posterHtmlBg, this.qrcodeUrl, '');
        },
        closeSharePopup() {
            this.showSharePopup = false;
        },
        createQrcode(text) {
            console.log('text333', text);
            // 生成二维码
            const canvas = document.getElementById('canvas');
            QRCode.toCanvas(canvas, text, {
                margin: 0,
            });
            let data = canvas.toDataURL('image/png', 1);
            this.qrcodeUrl = data;
        },
        //img1背景图、img2二维码
        drawAndShareImage(img1, img2) {
            let canvas = document.getElementById('myCanvas');
            canvas.width = 750;
            canvas.height = 1334;
            let context = canvas.getContext('2d');
            context.rect(0, 0, canvas.width, canvas.height);
            context.fillStyle = '#fff';
            context.fill();
            let myImage = new Image();
            myImage.src = img1;
            myImage.crossOrigin = 'Anonymous';
            myImage.onload = function() {
                context.drawImage(myImage, 0, 0, 750, 1334);
                let myImage2 = new Image();
                myImage2.src = img2;
                myImage2.crossOrigin = 'Anonymous';
                myImage2.onload = function() {
                    context.drawImage(myImage2, 202, 667, 350, 350);
                    let base64 = canvas.toDataURL('image/png');
                    let img = document.getElementById('myCanvas');
                    img.setAttribute('src', base64);
                };
            };
        },