前言
**
目前小程序只支持卡片方式分享到聊天页面，官方不知道何时会新增分享朋友圈方式。最近有个需求要分享到朋友圈，现在大家的通用做法就是通过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()}})}})},
