onShow() {var that =this//2. canvas绘制文字和图片const ctx = wx.createCanvasContext('myCanvas');var imgPath = '../../image/1.png'var bgImgPath = '../../image/zny.png';var userImgPath = '../../image/zny.png';ctx.drawImage(imgPath, 0, 0, 320, 500);ctx.setFillStyle('white')ctx.fillRect(0, 0, 0, 0);ctx.drawImage(bgImgPath, 35, 403, 60, 60);ctx.drawImage(userImgPath, 30, 35, 70, 70);ctx.drawImage(imgPath, 410, 610, 160, 160);ctx.setFontSize(14)ctx.setFillStyle('#000')ctx.fillText('妖妖灵', 100, 60)ctx.setFontSize(16)ctx.setFillStyle('#999999')ctx.fillText('已坚持 100 天', 110, 199)ctx.setFontSize(16)ctx.setFillStyle('#3366FF')ctx.fillText('100', 214, 258)ctx.fillText('第 10000 名', 174, 283)// ctx.setFontSize(24)// ctx.fillText('长按扫码查看详情', 30, 770)ctx.draw()},
上面 处理图片 向图片增加 需求 的 数据文字 以及图片等
下一步 将canvas生成图片
wx.canvasToTempFilePath({ //将canvas生成图片canvasId: 'myCanvas',x: 0,y: 0,width: 320,height: 500,success: function (res) {let urls = res.tempFilePath //图片临时路径// let urls = '../../image/guide.jpg' //图片临时路径wx.showShareImageMenu({ //分享给朋友path: urls,success: (res) => {console.log("分享成功：", res);},fail: (err) => {console.log("分享失败：", err);wx.showToast({title: "分享失败",duration: 2000})},})}}, this)},
