微信小程序微信头像使用canvas绘制失败问题开发工具正常真机不显示的解决方案
解决方案我们的需求是动态生成一个含有微信头像的图片作为分享图片。
我们在页面中添加cancas
<view style='position:absolute;left:400rpx;'><canvas canvas-id='ttcanvas' style='height:240px;width:320px;position:absolute;left:400rpx;'><!-- <view class='colorpic'><view class='pictit'><image src='{{scanConfig.userInfo.avatar}}'></image></view><view class='picblock'><image src='../images/ttshare.png'></image><text>{{gameConfig.myScore}}</text></view><view class='pictext'><image src='../images/qiubai.png'></image></view></view> --></canvas></view>
首先我我第一步想的是我在canvas里面写标签，添加进去，我就可以OK了！（我是个小白，程序小白），事实上！不可能的！！canvas导出图片怎么可能支持你在里面写标签，标签的东西完全不在画布里面好嘛！
好吧，接下来我开始了手动画canvas之路。
var contex = wx.createCanvasContext('ttcanvas');//ttcanvas为该canvas的ID//var contex = ctx.getContext('2d');var avatarurl_width = 300;//这个是画布宽var avatarurl_heigth = 240;//这个是高var avatarurl_x = 50;var avatarurl_y = 50;// contex.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);//这个地方我画了个头像的圆// contex.clip();contex.drawImage('../images/share.jpg', 0, 0, avatarurl_width, avatarurl_heigth); // 这个是我的背景图片，本地的！contex.restore();contex.save();contex.beginPath(); //开始绘制contex.arc(150, 50, 30, 0, Math.PI * 2, false);contex.clip();//contex.arc(25, 25, 25, Math.PI * 2, false);//contex.clip();contex.drawImage(self.data.locolurl, 120, 20, 60, 60);contex.restore();contex.setFontSize(20)contex.fillStyle = "#fff";contex.fillText(self.data.gameConfig.myScore, 130, 132)contex.restore();contex.draw(true, setTimeout(function () {wx.canvasToTempFilePath({//导出图片width: 300,height: 240,destWidth: 300,destHeight: 240,canvasId: 'ttcanvas',success: res => {console.log(res.tempFilePath)self.data.shareurl = res.tempFilePath;self.setData(self.data);}},this)}, 100))
好了，通过以上代码我成功绘制了一个含有头像的canvas，并导出图片到了默认路径，也就是上述路径的shareurl里面！
onShareAppMessage: function () {var self=this;return{title: '奇葩天地网抬头',desc: '分享描述',path: '分享后的打开路径',imageUrl:self.data.shareurl,success:function(res){console.log(res)}}},
好啦！接下来我们点击分享就OK了吧！
你以为好了么！
太天真的，你会发现模拟器OK了，真机完全加载不出来头像的好嘛！！！
好吧，没有办法 我就开始了踩坑之路，到底怎么办才能动态生成还有微信头像的图片，还可以让真机可以显示呢！
解决方案
原因是：手机端canvas无法绘制网络图片，而头像是一个网络资源，所以需要将头像缓存到本地之后再通过本地临时文件地址进行绘制。需要用到wx. wx.downloadFile()
第一步：你需要把微信头像下载到本地路径，这个下载的时候有一个坑请注意，你下载头像的时候会产生这样一个问题
你会发现，你没办法下载下来，主要是因为微信小程序对于你下载的地址有规定。
首先你需要登录https://mp.，没错账号密码就是你小程序绑定的邮箱号和密码
然后选择最下面的设置downloadFile合法域名，把微信头像的下载链接添加到下面就可以了
第二步：下载这个图片，代码如下
wx.downloadFile({url:'你头像的网络地址'，success: res => {// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容if (res.statusCode === 200) {this.setData({locolurl: res.tempFilePath//将下载下来的地址给data中的变量变量});}}, fail: res => {console.log(res);}});
第三步：调用这个本地地址，看得仔细的小伙伴可以看得出来我的第一段代码中的手绘canvas中已经引入了该本地路径地址了。
好了，这样功能就可以实现了！
最后一点提醒！！！
canvas默认是最高层级在页面最前面，当你把canvas设置为不显示的时候是不能导出图片的，我的做法是直接绝对定位扔屏幕外面了，简单粗暴！
