微信小程序微信头像使用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.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中已经引入了该本地路径地址了。

好了，这样功能就可以实现了！
最后一点提醒！！！

canvas默认是最高层级在页面最前面，当你把canvas设置为不显示的时候是不能导出图片的，我的做法是直接绝对定位扔屏幕外面了，简单粗暴！