我们的需求是动态生成一个含有微信头像的图片作为分享图片。

我们在页面中添加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了，真机完全加载不出来头像的好嘛！！！

好吧，没有办法我就开始了踩坑之路，到底怎么办才能动态生成还有微信头像的图片，还可以让真机可以显示呢！

第一步，你需要把微信头像下载到本地路径，这个下载的时候有一个坑请注意，你下载头像的时候会产生这样一个问题

你会发现，你没办法下载下来，主要是因为微信小程序对于你下载的地址有规定。

首先你需要登录https://mp.weixin.qq.com，没错账号密码就是你小程序绑定的邮箱号和密码

然后选择最下面的设置downloadFile合法域名，把微信头像的下载链接添加到下面就可以了

第二步，下载这个图片，代码如下

wx.downloadFile({      url:'你头像的网络地址'，      success: res => {        // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容        if (res.statusCode === 200) {          this.setData({            locolurl: res.tempFilePath//将下载下来的地址给data中的变量变量          });        }      }, fail: res => {        console.log(res);      }    });

第三部调用这个本地地址，看得仔细的小伙伴可以看得出来我的第一段代码中的手绘canvas中已经引入了该本地路径地址了。

好了，这样功能就可以实现了！