前言
**
目前小程序只支持卡片方式分享到聊天页面，官方不知道何时会新增分享朋友圈方式。最近有个需求要分享到朋友圈，现在大家的通用做法就是通过Canvas生成一张图片后进行保存，然后自行转发朋友圈。最近有个此类需求，至此把开发过程中遇到的坑做个记录，下面先看下效果图。
踩坑记录:
1.在开发过程中，使用了微信的下载文件API，所以需要在小程序后台downloadFile合法域名配置 <<图片域名>> 的白名单（配置后有时间延迟，所以需要耐心等待）。但是，不管是在微信开发工具中还是真机开启调试模式时候，不配置下载域名白名单功能也是正常。所以记得配置。
2.下载图片后，一定要通过wx.getImageInfo 来获取到图片的信息。不然真机上无法获取到图片信息，Canvas 无法绘制。
目前通过Canvas绘制出来的文字和图片还有些模糊，有抗锯齿。接下来将会优化，然后再进行补充说明。
1.打卡成功后后台返回数据，下载要绘制的图片
OnShow()方法里调用该方法 // 弹出打卡海报 showPoster: function() { var that = this; that.setData({ showPosterImage: false }) // 下载海报图 wx.downloadFile({ url: that.data.posterBackground, success: function(res) { that.setData({ downloadPosterBg: res.tempFilePath }) }, fail: function() { console.log('fail') } }) // 下载头像 wx.downloadFile({ url: that.data.posterHeadImage, success: function(res) { that.setData({ downloadHeaderImage: res.tempFilePath }) }, fail: function() { console.log('fail') } })//下载二维码 wx.downloadFile({ url: that.data.posterQRImage, success: function(res) { that.setData({ downloadQRImage: res.tempFilePath }) }, fail: function() { console.log('fail') } }) },```**2.点保存图片，Canvas绘制图片**`````'// 保存海报 savePoster: function() { // 获取背景图片信息 var that = this; let promise1 = new Promise(function(resolve, reject) { wx.getImageInfo({ src: that.data.downloadPosterBg, success: function(res) { resolve(res); } }) }); //获取头像信息 let promise2 = new Promise(function(resolve, reject) { wx.getImageInfo({ src: that.data.downloadHeaderImage, success: function(res) { resolve(res); } }) }); //获取二维码 let promise3 = new Promise(function(resolve, reject) { wx.getImageInfo({ src: that.data.downloadQRImage, success: function(res) { resolve(res); } }) }); Promise.all([ promise1, promise2, promise3 ]).then(res => { wx.showLoading({ title: '分享图片生成中...', icon: 'loading', duration: 1000 }) /* 图片获取成功才执行后续代码 */ var canvas = wx.createCanvasContext('hoCanvas') // 绘制背景图 // canvas.drawImage(res[0].path, 0, 0, 628, 838); canvas.drawImage(res[0].path, 0, 0, 632, 970); // 绘制头像 canvas.save() canvas.beginPath() // canvas.arc(50, 740, 30, 0, 2 * Math.PI) canvas.arc(68, 708, 30, 0, 2 * Math.PI) canvas.clip() // canvas.drawImage(res[1].path, 20, 710, 60, 60); canvas.drawImage(res[1].path, 38, 678, 60, 60); canvas.restore() // 绘制活动二维码 // canvas.drawImage(res[2].path, 490, 700, 100, 100); canvas.drawImage(res[2].path, 492, 820, 100, 100); //绘制微信昵称文本 canvas.setFontSize(23) canvas.setFillStyle("#424E75") canvas.setStrokeStyle('#424E75') // canvas.fillText(this.data.posterNickName, 100, 745, 350) canvas.fillText(this.data.posterNickName, 110, 700, 350) // 绘制打卡昵称 canvas.setFontSize(18) canvas.setFillStyle("#424E75") canvas.setStrokeStyle('#424E75') canvas.fillText(this.data.posterDakaName, 110, 740) // 绘制坚持天数 canvas.setFontSize(50) canvas.setFillStyle("#424E75") canvas.setStrokeStyle('#424E75') if (this.data.posterDakaCount <= 9) { canvas.fillText(this.data.posterDakaCount, 520, 750) } else if (this.data.posterDakaCount > 9 && this.data.posterDakaCount < 99) { canvas.fillText(this.data.posterDakaCount, 510, 750) } else if (this.data.posterDakaCount > 99 && this.data.posterDakaCount < 999) { canvas.fillText(this.data.posterDakaCount, 500, 750) } canvas.draw() setTimeout(function() { wx.canvasToTempFilePath({ x: 0, y: 0, width: 632, height: 970, destWidth: 632, destHeight: 970, canvasId: 'hoCanvas', success: function(res) { that.setData({ postUrl: res.tempFilePath, }) that.saveImageToAlbum(); wx.hideLoading() }, fail: function(res) {} }) }, 500) }) },3.调用微信API，保存图片
saveImageToAlbum: function() { var that = this; //将图片保存到相册 wx.saveImageToPhotosAlbum({ filePath: that.data.postUrl, success(res) { wx.showModal({ title: '保存成功', content: '图片成功保存到相册了，快去分享朋友圈吧', showCancel: false, confirmText: '好的', confirmColor: '#818FFB', success: function(res) { if (res.confirm) { that.setData({ showPosterImage: true }) } that.hideShareImg() } }) } }) },
