微信小程序生成海报图片js代码(调试中...)

Posted 2022-04-20 lizhipengvvip

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 错误处理
        )
    ,