微信小程序生成海報圖片js代碼(調試中...)

data: {
        // 屏幕可用寬高
        windowWidth: wx.getSystemInfoSync().windowWidth,
        windowHeight: wx.getSystemInfoSync().screenHeight,
        // 圖片預覽本地文件路徑
        previewImageUrl: null
    },
    buildPosterSaveAlbum: function() {
        var imgWidth = 0; // 主圖的寬度
        var imgHeight = 0; // 主圖的高度
        let that = this;
        wx.showLoading({
            title: '海報生成中...',
        })
        // 獲取圖1信息
        // tip 貌似本地靜態文件路徑不能作為畫布的src 參數，網絡圖片無影響。
        let promise1 = new Promise(function(resolve, reject) {
            wx.getImageInfo({
				src: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKvEFUUhmicMJVARZicC9ApzqvlFbSibsX1Nc4nibhWPJ2xGia4wThpS8AViaoFPCGd4GHk0xrp9MHBYCpA/132',
                success: function(res) {
					console.log(res)
                    imgWidth = res.width; // 設置主圖的寬度
                    imgHeight = res.height; // 設置主圖的高度
                    resolve(res);
                },
                fail: function(res) {
                    reject(res)
                }
            })
        });

		console.log(imgWidth);
		console.log(imgHeight)

        // // 獲取圖2信息，二維碼圖片，后期在服務器獲得
        // let promise2 = new Promise(function(resolve, reject) {
        //     wx.getImageInfo({
		// 		src: 'https://wx.qlogo.cn/mmhead/XBu6rjtdhtCcrAPKNLfiaaVwMSaaOGDx8kzewniaicmVicM/132',
        //         success: function(res) {
        //             resolve(res);
        //         },
        //         fail: function(res) {
        //             reject(res)
        //         }
        //     })
        // });

        //頭像
        // let promise3 = new Promise(function(resolve, reject) {
        //     wx.getImageInfo({
        //         src: wx.getStorageSync("userInfo").userInfo.avatarUrl,
        //         success: function(res) {
        //             resolve(res);
        //         },
        //         fail: function(res) {
        //             reject(res)
        //         }
        //     })
        // });
        // 執行
        Promise.all(
            [promise1]
        ).then(res => {
			
            // 獲取寬高
            let wW = that.data.windowWidth;
			
            var imgH = imgHeight / (imgWidth / wW) * 0.9;
			
            let wH = imgH + 200;
            that.setData({
                windowHeight: imgH + 200
            });
            // 定義畫布上下文常量
            const ctx = wx.createCanvasContext('firstCanvas');

            //背景白色
            ctx.setFillStyle('white');
            //從x=0,y=0開始繪制白色
            ctx.fillRect(0, 0, wW, wH);
			

            //圖1
			console.log(res);
            ctx.drawImage(res[0].path, wW * 0.05, wW * 0.05, wW * 0.9, imgH);
            //圖2
            // ctx.drawImage(res[1].path, wW * 0.7, imgH + 40, wW * 0.25, wW * 0.25);

            //繪制誰推薦的文字
            // ctx.drawImage(res[2].path, wW * 0.05, imgH + 40, wW * 0.09, wW * 0.09);
            ctx.setFillStyle("#007382");
            ctx.setFontSize(20);
            // var nickName = wx.getStorageSync("userInfo").NickName;
			console.log('nickName')
			var nickName = "hahah";
            if (nickName.length >= 8 && nickName.length != 8) {
                nickName = nickName.substring(0, 8) + "..";
            }
            var tuijian = nickName + "為你推薦";
            ctx.fillText(tuijian, (wW * 0.05) + (wW * 0.09) + 10, imgH + 60 + ((wW * 0.09) / 8));

            ctx.setFillStyle('#000000');
            ctx.setFontSize(18);
            let str = '多頭玫瑰1扎29.9元（隨機顏色）范德薩范德薩范德薩范德薩發生的啊';
            if (str.length >= 10 && str.length != 10) {
                str = str.substring(0, 10) + "...";
            }
            ctx.fillText(str, (wW * 0.05) + (wW * 0.09) + 7, imgH + 60 + wW * 0.09);

            // 繪制文字
            //ctx.lineWidth = 0;
            //ctx.fillText("29.9", wW * 0.05, wW * 1.08)
            ctx.setFillStyle('#ff2200');
            ctx.setFontSize(23);
            ctx.fillText("￥29.99", (wW * 0.05) + (wW * 0.09) + 2, imgH + 60 + wW * 0.1 + 35)

            //ctx.save();
            ctx.draw();

            //destWidth值越大圖片越清晰/大小成正比 解決畫布模糊的問題
            //詳細的參數見畫布文檔
            setTimeout(function() {
                wx.canvasToTempFilePath({
                    canvasId: 'firstCanvas',
                    width: wW,
                    height: wH,
                    destWidth: wW * 3,
                    destHeight: wH * 3,
                    quality: 1,
                    fileType: "png",
                    success: function success(res) {
                        console.log('轉圖片結果');
                        // 關閉loading
                        wx.hideLoading();
                        // 到page對象的data中
                        that.setData({
                            previewImageUrl: res.tempFilePath
                        })
                        console.log("tempFilePath:+++" + res.tempFilePath);
                        wx.previewImage({
                            current: that.data.previewImageUrl,
                            urls: [that.data.previewImageUrl]
                        })
                    },
                    complete: function complete(e) {
                        console.log(e.errMsg);
                    }
                });
            }, 300);
        }).
        catch(err => {
            //error 錯誤處理
        })
    },