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