两个图片生成一个海报

<template>
    <view>
        <canvas canvas-id="myCanvas" :style="{'width':canvasWidth+'px', 'height':canvasHeight+'px'}"
            @longpress="longpress"></canvas>
            <!-- <img :src="centerPath" alt=""> -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
                customerId: '',
                activityId: '',
                backimg: "https://pic.616pic.com/bg_w1180/00/20/53/8UvgedjLU8.jpg",
                inviteQR: "https://img1.baidu.com/it/u=666927474,3753237121&fm=253&fmt=auto&app=138&f=GIF?w=504&h=500", //动态二维码
                canvasWidth: 300,
                canvasHeight: 500,
                centerPath: ''
            };
        },
        onLoad(options) {
            this.customerId = options.customerId || ''
            this.activityId = options.activityId || ''
        },
        onShow() {
            this.createUnlimitQrcodeUrl()

        },
        onReady() {
            // 动态设置画布大小
            let systemInfo = uni.getSystemInfoSync();

            this.canvasWidth = systemInfo.windowWidth; // 屏幕宽度
            this.canvasHeight = systemInfo.windowHeight; // 屏幕高度
        },
        methods: {
            longpress() {
                console.log("我长按了");
                // 将图片保存到相册
                if(this.centerPath.length<=0) {
                    return 
                }
                let _this = this
                uni.showModal({
                    title: '',
                    content: '保存海报到相册',
                    success(res) {
                        if (res.confirm) {
                            console.log('用户点击确定');
                            _this.savePhoto()
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                })
            },
            savePhoto() {
                uni.saveImageToPhotosAlbum({
                    quality: 1,
                    width: 750, // 图片宽度
                    filePath: this.centerPath,
                    success: () => {
                        uni.showToast({
                            title: '保存成功'
                        })
                    },
                    fail: () => {
                        uni.showToast({
                            title: '保存失败'
                        })
                    }
                });
            },
            // 获取二维码
            async createUnlimitQrcodeUrl() {
                console.log("二维码地址===", this.inviteQR);
                this.inviteQR = res?.retdata || ''
                this.queryPosterInfo()

            },
            // 获取海报中文字内容和背景图
            async queryPosterInfo() {

                console.log("获取海报内容===", res);
                this.createPoster()
            },
            //生成海报--微信端
            createPoster() {
                let _this = this
                wx.getImageInfo({
                    src: _this.backimg,
                    success: function(res) {
                        console.log(res, '图片的信息');
                        let bgImgPath = res.path; // 背景图片路径
                        // _this.canvasWidth = res.width
                        // _this.canvasHeight = res.height
                        wx.getImageInfo({
                            src: _this.inviteQR,
                            success: function(resCode) {
                                var qrcodeImgPath = resCode.path; // 二维码图片路径

                                // 获取canvas上下文
                                var ctx = wx.createCanvasContext('myCanvas');

                                // 动态设置画布大小(这里设置画布大小会出现赋值慢，图片不完整)
                                //let systemInfo = uni.getSystemInfoSync();

                                //_this.canvasWidth = systemInfo.windowWidth; // 屏幕宽度
                                //_this.canvasHeight = systemInfo.windowHeight; // 屏幕高度
                                console.log(systemInfo, "手机信息====", _this.canvasWidth, _this
                                    .canvasHeight);
                                // 绘制背景图片
                                ctx.drawImage(bgImgPath, 0, 0, _this.canvasWidth, _this
                                    .canvasHeight);

                                // 绘制二维码图片
                                ctx.drawImage(qrcodeImgPath, _this.canvasWidth / 2 - 338 / 4, _this
                                    .canvasHeight / 2 + 154 / 4, 338 / 2, 338 / 2);

                                // 将绘制好的图片保存到本地
                                ctx.draw(false, function() {
                                    wx.canvasToTempFilePath({
                                        canvasId: 'myCanvas',
                                        success: function(resEnd) {
                                            console.log(resEnd); // 生成的海报图片路径

                                            _this.centerPath = resEnd.tempFilePath
                                        },
                                        fail: () => {
                                          uni.showToast({
                                            title: '图片生成失败',
                                            icon: 'none'
                                          });
                                        }
                                    })
                                })
                            }
                        })
                    }
                })

            },
        }
    }
</script>

<style lang="scss">

</style>

uniapp文档：https://uniapp.dcloud.net.cn/api/canvas/CanvasContext.html