uniapp/小程序实现canvas画布保存图片

<template>
    <view>
        <canvas canvas-id="gameCanvas" style="width:750rpx; height:1232rpx;"></canvas>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                kehu: '',
                pingming: '',
                date: '',
                zhongliang: '',
                zongjine: ''
            };
        },
        onLoad(options) {
            const ctx = uni.createCanvasContext('gameCanvas'); //创建画布对象  
            uni.showLoading({
                title: '正在生成中...'
            })
            console.log(options) //接收上个页面的数据
            this.kehu = options.buyerOrg;
            this.pingming = options.goodsName;
            this.zhongliang = options.settleWeight;
            this.date = options.createTime;
            this.zongjine = options.settlement;
            let imageWidth = 375,
                imageHeight = 616;
            uni.getImageInfo({
                src: 'https://xxxxxxxxxxxxxxxxxx.png', //网络图片用来做背景
                success: (res) => {
                    console.log(res.path)
                    ctx.save()
                    ctx.drawImage(res.path, 0, 0, 375, 616) 
                    ctx.draw(true)
                    ctx.setFillStyle('#333333')
                    ctx.draw(true)
                    ctx.setFillStyle('black')
                    ctx.setFontSize(16)
                    ctx.fillText('客户名：' + this.kehu, 30, 130)
                    ctx.fillText('品名：' + this.pingming, 30, 190)
                    ctx.fillText('重量：' + this.zhongliang + '吨', 30, 250)
                    ctx.fillText('总金额：' + '￥' + this.zongjine, 30, 310)
                    ctx.fillText('日期：' + this.date, 30, 370)
                    ctx.draw(true)
                    setTimeout(() => { //解决画布空白的问题
                        ctx.draw(true, () => {
                            // console.log(666)
                            uni.canvasToTempFilePath({ //将canvas生成图片
                                canvasId: 'gameCanvas',
                                x: 0,
                                y: 0,
                                width: imageWidth,
                                height: imageHeight,
                                destWidth: imageWidth, //截取canvas的宽度
                                destHeight: imageHeight, //截取canvas的高度
                                success: function(res) {
                                    uni.saveImageToPhotosAlbum({ //保存图片到相册
                                        filePath: res.tempFilePath,
                                        success: function() {
                                            uni.hideLoading()
                                            uni.showToast({
                                                title: "图片已保存",
                                                duration: 2000
                                            })
                                        },
                                        fail() {
                                            uni.hideLoading()
                                        }
                                    })
                                }
                            })
                        })
                    }, 1500);

                }
            })

        },


    }
</script>