我們的需求是動態生成一個含有微信頭像的圖片作為分享圖片。

我們在頁面中新增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了，真機完全載入不出來頭像的好嘛！！！

好吧，沒有辦法 我就開始了踩坑之路，到底怎麼辦才能動態生成還有微信頭像的圖片，還可以讓真機可以顯示呢！

第一步，你需要把微信頭像下載到本地路徑，這個下載的時候有一個坑請注意，你下載頭像的時候會產生這樣一個問題

你會發現，你沒辦法下載下來，主要是因為微信小程式對於你下載的地址有規定。

然後選擇最下面的設定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設定為不顯示的時候是不能匯出圖片的，我的做法是直接絕對定位扔螢幕外面了，簡單粗暴！

這是我第一次寫部落格，如果有錯誤歡迎大佬們批評指正！如果覺得寫的不錯，可以口頭鼓勵一下，謝謝大家！