小程式 分享朋友圈當中的坑

無奈現在小程式沒有開放分享到朋友圈的功能，只能通過canvas生成海報，儲存到手機中分享朋友圈。  說說我遇到的兩個坑吧。

 

這是最終實現的效果圖。

1

1. 通過drawImage畫圖片，如果是網路圖片，需要先快取到本地。  我起始是直接用網路圖畫的，在編輯器裡預覽是沒有問題的。但是用手機預覽時會發現圖片不顯示。 
2. 快取圖片到本地，有兩個函式可以用，getImageInfo和downloadFile。 我首先選擇的是getImageInfo。 除錯的時候發現小程式碼可以獲取到，使用者頭像始終獲取不到。success，fail，complete裡統統不執行。 連結換成小程式碼的就可以獲取。最後無奈使用者頭像只能換成downloadFile函式快取了。 

2

小程式獲取到的使用者頭像是直角的，需要通過arc和clip建立一個圓形的剪下路徑然後再繪製頭像。這個一開始就走通了。 但是最後把畫布儲存圖片時候發現圖片是png透明的，於是在建立畫布的時候就把畫布填充為白色。  但是填充完發現頭像變回直角了。  懵逼了，以為是填充影響到了剪下路徑，除錯多次發現問題還是存在。

要麼把填充色去掉，要麼頭像只能是直角了。  期間我想到了一個辦法，就是儲存畫布為圖片時能不能設定成白色底，通過api發現可以設定圖片格式，我設定成了jpg，預設是png的。 儲存到電腦上，完美解決，白色的底。 通過手機看，發現背景色是黑色。。

沒招了，抱著犧牲頭像為直角的想法，把畫布填充白色。 手機預覽時發現頭像是圓角的了，但模擬器上頭像還是顯示直角。 欲哭無淚。  

不能太相信模擬器啊。  另外我前兩天用模擬器時發現不能搜尋，於是關了重啟。再開啟時發現當時正在編輯的js檔案全部為空了。為空了.. 500多行的程式碼呀。  好在的是有個頁面和這個類似，複製過來完善了下，但也浪費了不少時間。  從此後就果斷git

模擬器效果，手機預覽頭像是圓角的。

 

放下程式碼吧，rem函式是我建立的轉換px函式。 

    var data = this.data;
    
    var that = this;

    //canvas繪製文字和圖片
    const ctx = wx.createCanvasContext('share');
    var imgPath = app.addUrlImg(info.iconUrl);

    // 背景色
    ctx.setFillStyle('white');
    ctx.fillRect(0, 0, app.rem(500), app.rem(600));

    //頭像
    wx.downloadFile({
      url:"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKerhicfTMvNOiaibwIWLKzdXEHlVYBHvGiandyGcuCWwnvDeSgaYz8pl3vJCoh8UQa2ZZiaHhQPKRiblzA/132",
      success: res => {
        imgPath = res.tempFilePath;
        ctx.save();
        ctx.beginPath();
        ctx.arc(app.rem(70), app.rem(85), app.rem(40), 0, 2 * Math.PI);
        ctx.clip();
        ctx.drawImage(imgPath, app.rem(30), app.rem(45), app.rem(80), app.rem(80));
        ctx.restore();
        ctx.draw(true);
      }
    })
    
    //暱稱
    ctx.setFontSize(app.rem(26));
    ctx.setFillStyle('#2dab94');
    ctx.fillText(info.nickName, app.rem(128), app.rem(80));

    //文字
    ctx.setFontSize(app.rem(26));
    ctx.setFillStyle('#363636');
    ctx.fillText('分享給你一個小程式', app.rem(128), app.rem(115));

    ctx.setFontSize(app.rem(28));
    ctx.setFillStyle('#878787');
    ctx.fillText('長按識別小程式碼訪問', app.rem(116), app.rem(540))

    // 二維碼
    app.request({
      url: app.api._getGRcodeBYb,
      method:"get",
      data: { 
        page:"public/chat/chat/index",
        scene:"id=1234",
        width: "340"
      },
      userId:false,
      success: res => {
        var img = app._root + res.data.qr_code_url;
        // 快取圖片
        wx.getImageInfo({
          src: img,
          success: res => {
            ctx.drawImage(res.path, app.rem(110), app.rem(190), app.rem(260), app.rem(260));
            ctx.draw(true);
          }
        });
        
      }
    })
    
    ctx.draw(true);

wx.showLoading({
      title: '儲存中..',
    })
    // 生成圖片
    wx.canvasToTempFilePath({
      canvasId: 'share',
      fileType:"jpg",
      quality:1,
      success: function (res) {
        var saveImg = res.tempFilePath
        // 儲存圖片
        wx.saveImageToPhotosAlbum({
          filePath: saveImg,
          success(res) {
            wx.hideLoading();
            wx.showToast({
              title: '成功儲存到相簿',
            })
          }
        })

      },
      fail: function (res) {
        wx.showToast({
          title: '生成圖片失敗',
          icon:"none"
        })
      }
    })