- 由于微信的头像都是正方形的，现在想在canvas上绘制出一个圆形的头像然后保存到本地，方法是在头像外围加一个圆形的容器，然后把头像放进容器里面，代码如下：
var avatorWidth = unit * 64 , avatorHeight = unit * 64;var avatarurlX = unit * 25; //绘制的头像在画布上的位置var avatarurlY = unit * 25; //绘制的头像在画布上的位置context.save();context.beginPath(); //开始绘制context.arc(avatorWidth / 2 + avatarurlX, avatorHeight / 2 + avatarurlY, avatorWidth / 2, 0, Math.PI * 2, false);context.clip();context.drawImage(that.data.shareAvatarPath, unit * 25, unit * 25, avatorWidth, avatorWidth);context.restore();
- 生成的海报如下
- js源码：
savePosterToLocal:function(){ wx.request({ url: app.globalData.requestUrl + '/api/statics/statics', method:"get", data:{ topic:"poster_save_click" }, success:function(){ console.log("success"); } }) //this.posterAnimate(100,1); wx.showLoading({ title: '保存中...', }) var that = this; var context = wx.createCanvasContext('share-poster'); var unit = that.data.screenWidth / 375; var pathBg = that.data.shareBg; //背景图片 var pathProgramCode = that.data.shareProgramCode; var pathAvatar = that.data.shareAvatarPath; //用户头像 console.log(unit); var pathNickName = app.globalData.userInfo.nickName; //用户昵称 var shareTitle = "我已完成第"+that.data.totalDaysToNow+"天的学习"; //分享标题 var shareDescTop = that.data.topic //描述 context.drawImage(pathBg, 0, 0, unit * 375, unit * 554); context.drawImage(pathProgramCode, unit * 250, unit * 430, unit * 100, unit * 100); var avatorWidth = unit * 64 , avatorHeight = unit * 64; var avatarurlX = unit * 25; //绘制的头像在画布上的位置 var avatarurlY = unit * 25; //绘制的头像在画布上的位置 context.save(); context.beginPath(); //开始绘制 context.arc(avatorWidth / 2 + avatarurlX, avatorHeight / 2 + avatarurlY, avatorWidth / 2, 0, Math.PI * 2, false); context.clip(); context.drawImage(that.data.shareAvatarPath, unit * 25, unit * 25, avatorWidth, avatorWidth); context.restore(); context.setFontSize(18); context.setFillStyle("#2a5acd"); context.fillText(pathNickName, unit * 98, unit * 48); context.fillText(shareTitle, unit * 98, unit * 70); context.setFontSize(22); context.setFillStyle("#D26383"); context.setLineWidth(20); context.fillText(shareDescTop, unit * 25, unit * 140) // context.fillText(shareDescBottom, unit * 25, unit * 170) context.draw(false, function () { wx.canvasToTempFilePath({ x: 0, y: 0, width: unit * 375, height: unit * 554, destWidth: unit * 375 * 3, //*2是为了让图片分辨率更大，显得更清晰 destHeight: unit * 554 * 3, canvasId: 'share-poster', success: function (res) { that.setData({ shareImgPath: res.tempFilePath }) if (!res.tempFilePath) { wx.showModal({ title: '提示', content: '图片绘制中，请稍后重试', showCancel: false }) } console.log(that.data.shareImgPath) wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: (res) => { console.log(res) wx.hideLoading() that.posterAnimate(100, 1); wx.showModal({ title: '提示', content: '保存成功，去分享吧', showCancel:false, success(res) { if (res.confirm) { console.log('用户点击确定') } } }) }, fail: (err) => { console.log(err) wx.hideLoading() that.posterAnimate(100, 1); } }) } }) }); },
- 对于图片需要注意的是，如果是网络资源，需要先把图片下载到临时路径才能使用，调用wx.downloadFile方法，然后绘制的图片路径使用该方法返回的路径（文件的下载域名需要在微信的后台配置一下）：
wx.downloadFile({ url: app.globalData.userInfo.avatarUrl, success: function (res) { that.setData({ shareAvatarPath: res.tempFilePath }) console.log(res.tempFilePath); } })
- 对于分辨率问题：可以更改wx.canvasToTempFilePath中的destWidth和dest Height属性，这两个属性就是用于改变保存到本地的图片大小，适当增大它们的值可以很好的提高清晰度
- 总结：微信小程序的canvasAPI还是特别好用的，这我也只是刚刚接触，而且时间比较紧，所以代码方面没有怎么优化过，后续会继续学习优化。
