小程序(xu)提(ti)供了(le)轉發給好友的接口(kou)(kou)，但是沒提(ti)供分享到朋友圈(quan)的接口(kou)(kou)。于是，只(zhi)有引導(dao)用戶保存圖片分享到朋友圈(quan)。 兩種方案：用微信(xin) api 手動保存，用 painter 。

微信 api

使(shi)用(yong)原生(sheng)接口(kou)的(de)話，大(da)致是使(shi)用(yong) canvas 繪(hui)制出海(hai)報(bao)，然后下(xia)(xia)載。所以重點是繪(hui)制出海(hai)報(bao)，下(xia)(xia)載的(de)流(liu)程(cheng)都是一樣的(de)。當(dang)然在(zai)保(bao)存圖片到(dao)相(xiang)冊前，還(huan)會需(xu)(xu)要(yao)獲(huo)取保(bao)存圖片到(dao)相(xiang)冊的(de)權限。總結下(xia)(xia)來(lai)就(jiu)是canvas繪(hui)制，獲(huo)取保(bao)存權限，保(bao)存圖片這三個步驟。 首先來(lai)看(kan)繪(hui)制海(hai)報(bao)，需(xu)(xu)要(yao)使(shi)用(yong)以下(xia)(xia)接口(kou)

• wx.createCanvasContext 創建 canvas context
• ctx.drawImage 繪制圖片到 canvas
• ctx.fillText 寫文字
• wx.getImageInfo 獲取網絡圖片的 tempFilePath
• ctx.draw canvas 繪制

最終保存下來的海報是這樣的

繪制的內容(rong)很簡(jian)單，首先就是背(bei)景圖；然后是分享者的頭像；接(jie)下來是 @ xx 邀請(qing)你 這樣一個文本描述；最后就是底部的小程序碼。

首先，創建 canvas 畫布

<canvas canvas-id='canvas' class='canvas' :style="{height: windowHeight + 'px'}"/>
復制代碼

使用小程序 createCanvasContext api ,需要傳(chuan)入(ru) canvasid

const ctx = wx.createCanvasContext('canvas')
復制代碼

然后(hou)將背景圖片(pian)繪制出來，背景圖片(pian)是(shi)放在本(ben)地的圖片(pian)。

ctx.drawImage('../../../static/assets/img/poster_background.png', 0, 0, this.windowWidth, this.windowHeight)
復制代碼

然后寫上文字

ctx.setFontSize(12);
ctx.setFillStyle('#FFFFFF');
ctx.setTextAlign('center');
ctx.fillText(`${this.privateUserInfo.nickname} 邀您領取`, this.windowWidth / 2, this.transformScale(520))
復制代碼

這里(li)會(hui)將原始尺(chi)寸(cun)和(he)繪制(zhi)(zhi)的尺(chi)寸(cun)等比例轉(zhuan)換一下，就不(bu)贅述(shu)了。再(zai)接(jie)下來就是繪制(zhi)(zhi)小程序(xu)碼(ma)了。由于小程序(xu)碼(ma)是帶(dai)了分(fen)享(xiang)(xiang)者的信息，所以必須是臨時獲取(qu)的網(wang)絡圖片資源，具體怎么(me)獲取(qu)帶(dai)有分(fen)享(xiang)(xiang)者信息的小程序(xu)碼(ma)，會(hui)專門寫一篇文章介紹。

繪制圖片

繪制(zhi)(zhi)頭(tou)像與(yu)小程(cheng)序碼，這(zhe)兩張圖(tu)片都(dou)是網絡資源，所以(yi)都(dou)要使用 wx. getImageInfo 接(jie)口將其(qi)下載下來放到微信內存(cun)中，然后使用其(qi)response.path 繪制(zhi)(zhi)。小程(cheng)序并不(bu)支(zhi)持(chi)直(zhi)接(jie)的繪制(zhi)(zhi)網絡圖(tu)片，而(er)且(qie)也不(bu)支(zhi)持(chi) base64圖(tu)片的繪制(zhi)(zhi)（雖然模擬器上會有效(xiao)果）。頭(tou)像的繪制(zhi)(zhi)還有有一個(ge)裁剪(jian)圓(yuan)形頭(tou)像的過(guo)程(cheng)。wx.getImageInfo是異步的，所以(yi)在回調函(han)數(shu)里(li)繪制(zhi)(zhi)，當然這(zhe)不(bu)是好的方式。可以(yi)使用 promise 來解(jie)決，由(you)于現(xian)在已經(jing)不(bu)用這(zhe)個(ge)代碼了，就沒有去改了。

wx.getImageInfo({
          src: miniProgramCodeSrc,
          success: (response) => {
            const miniProgramCodeSize = this.transformScale(160)
            ctx.drawImage(response.path, this.transformScale(85), this.transformScale(710), miniProgramCodeSize, miniProgramCodeSize)

            wx.getImageInfo({
              src: this.privateUserInfo.avatar,
              success: (response) => {
                const avatarSize = this.transformScale(100)
                //先繪制圓，裁剪成圓形圖片
                ctx.save();
                ctx.beginPath();
                //圓的原點x坐標，y坐標，半徑，起始弧度，終止弧度
                ctx.arc(this.transformScale(320), this.transformScale(425), avatarSize / 2, 0, 2 * Math.PI);
                ctx.setStrokeStyle('#ffffff');
                ctx.stroke();
                ctx.clip();

                ctx.drawImage(response.path, this.transformScale(270), this.transformScale(375), avatarSize, avatarSize)
                ctx.restore();

                ctx.draw(false, () => {
                  this.saveToTempFilePath()
                })
              }
            })
          }
        })
復制代碼

到這一步(bu)(bu)，繪制基(ji)本就結束了。我們所(suo)要的(de)(de)海報內(nei)容已(yi)經可(ke)以在 canvas 上(shang)呈現了，接(jie)下(xia)來就是將 canvas 的(de)(de)內(nei)容保存為圖(tu)片了。值得提醒的(de)(de)是，ctx.draw這個(ge)接(jie)口也是異步(bu)(bu)的(de)(de)，需要在其回調中執行(xing)下(xia)載的(de)(de)操(cao)作。

獲取 tempFilePath

• wx.canvasToTempFilePath 獲取整個 canvas 的tempFilePath

保存(cun)圖片最(zui)重要(yao)的(de)就是tempFilePath了，使用canvasToTempFilePath 獲(huo)取 tempFilePath。需(xu)(xu)要(yao)注意的(de)是canvasToTempFilePath接口二參需(xu)(xu)要(yao)傳入 this。

saveToTempFilePath() {
        wx.canvasToTempFilePath({
          canvasId: 'canvas',
          success: (response) => {
            //獲取相冊授權
          }
        }, this)
      }
復制代碼

獲(huo)取 tempFilePath 成功后再(zai)獲(huo)取保存權限，當然也可(ke)以先獲(huo)取保存權限，再(zai)獲(huo)取tempFilePath。

獲取保存權限

首先查看是否有保(bao)存(cun)權(quan)(quan)限，有權(quan)(quan)限就(jiu)可以直(zhi)接保(bao)存(cun)了。沒有權(quan)(quan)限就(jiu)先獲取權(quan)(quan)限，再保(bao)存(cun)。

• wx.getSetting 查看權限列表
• wx.authorize 若沒有保存圖片權限，進行授權

wx.getSetting({
  success: (res) => {
    if (!res.authSetting['scope.writePhotosAlbum']) {
      wx.authorize({
        scope:'scope.writePhotosAlbum',
        success: () => {
          this.saveImageToPhotosAlbumByWX(response.tempFilePath)
        }
      })
    } else {
      this.saveImageToPhotosAlbumByWX(response.tempFilePath)
    }
  }
})
復制代碼

保存圖片到相冊

• wx.saveImageToPhotosAlbum 保存圖片到相冊

這(zhe)一步就很簡單(dan)了，萬事俱(ju)備(bei)，只差保(bao)存了。調用 wx.saveImageToPhotosAlbum 即可。

saveImageToPhotosAlbumByWX(tempFilePath) {
        wx.saveImageToPhotosAlbum({
          filePath: tempFilePath,
          complete: () => {
            // 其他操作
          }
        })
      }
復制代碼

到這(zhe)里，使(shi)用原生 api 保存一張分享朋友圈的海報就好了。

painter

painter 是什么呢？

小(xiao)程序生成圖(tu)片庫，輕松(song)通過 json 方式繪制一張(zhang)可以發到朋友(you)圈的(de)圖(tu)片

painter 是(shi)(shi)酷家樂開源的小程序圖片生成(cheng)庫，類似 echarts，使用配(pei)置對象渲(xuan)染圖片到(dao)(dao) canvas。渲(xuan)染完成(cheng)后(hou)回調(diao)會返回 tempFilePath,然(ran)后(hou)調(diao)用 wx.saveImageToPhotosAlbum 即(ji)可保存。保存的步驟和第一種方案一致，關鍵是(shi)(shi)獲取到(dao)(dao) tempFilePath。

按(an)照其 readme 來操作就好(hao)了(le)，由于(yu)項(xiang)目是使用了(le) mpvue，所以使用了(le) mpvue接入方(fang)案 。

使用 painter

<painter v-if="showPainter" class='canvas' @imgOK="onImgOk" :palette="palette"/>
復制代碼

為(wei)什么要使用 v-if 呢，需要在所有數據(ju)都準備好了(le)后(hou)再渲染 painter，否則會無限繪制。

data() {
  return {
    //painter 配置數據
    palette: {
      width: '640rpx',
      height: '1008rpx',
      background: '/static/assets/img/poster_background.png',
      views: [
        {
          type: 'image',
          url: '',
          css: {
            top: '380rpx',
            left: '320rpx',
            align: 'center',
            width: '100rpx',
            height: '100rpx',
            borderRadius: '50rpx'
          }
        }, {
          type: 'text',
          text: '',
          css: {
            top: '490rpx',
            left: '320rpx',
            align: 'center',
            fontSize: '24rpx',
            color: '#fff'
          }
        },
        {
          type: 'image',
          url: '',
          css: {
            top: '690rpx',
            left: '85rpx',
            width: '180rpx',
            height: '180rpx'
          }
        }
      ]
    }

  }
},

computed: {
  showPainter() {
    const avatar = this.palette.views[0].url
    const text = this.palette.views[1].text
    const qrCodeUrl = this.palette.views[2].url
    return avatar !== '' && text !== '' && qrCodeUrl!== ''
  }
}
復制代碼

在(zai) painter繪制成功的回調里，將(jiang) tempFilePath 保存起來(lai)。接下來(lai)的權限獲取和保存圖片到相冊流程就(jiu)和上一個方(fang)案一致了。但是，需要提(ti)醒的是，tempFilePath 需要放在(zai)全局變(bian)量中(zhong)(zhong)，不(bu)能放在(zai)data 中(zhong)(zhong)。

總結

總結一下(xia)，遇到的一些坑(keng)

• 小程序canvas不能支持 base64
• drow 有回調
• drawImage 不能直接使用網絡圖片
• 需要處理獲取權限，用戶拒絕后的場景

最后