微信小程序-使用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里面寫標簽，添加進去，我就可以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中已經引入了該本地路徑地址了。

好了，這樣功能就可以實現了！

最后一點提醒！！！

canvas默認是最高層級在頁面最前面，當你把canvas設置為不顯示的時候是不能導出圖片的，我的做法是直接絕對定位扔屏幕外面了，簡單粗暴！