微信小程序生成圖片分享朋友圈

前言

**
目前小程序只支持卡片方式分享到聊天頁面，官方不知道何時會新增分享朋友圈方式。最近有個需求要分享到朋友圈，現在大家的通用做法就是通過Canvas生成一張圖片後進行保存，然後自行轉發朋友圈。最近有個此類需求，至此把開發過程中遇到的坑做個記錄，下面先看下效果圖。

1.打卡成功後後臺返回數據，下載要繪製的圖片

OnShow()方法裏調用該方法

 // 彈出打卡海報
  showPoster: function() {
    var that = this;
    that.setData({
      showPosterImage: false
    })

    // 1.posterBackground，posterHeadImage是打卡成功後後臺返回的海報背景與頭像
    // 2.首頁要將圖片部分做下載處理
    
    wx.downloadFile({
      url: that.data.posterBackground,
      success: function(res) {
        that.setData({
          downloadPosterBg: res.tempFilePath
        })
      },
      fail: function() {
        console.log('fail')
      }
    })

    // 下載頭像
    wx.downloadFile({
      url: that.data.posterHeadImage,
      success: function(res) {
        that.setData({
          downloadHeaderImage: res.tempFilePath
        })
      },
      fail: function() {
        console.log('fail')
      }
    })
  },

2.點保存圖片，Canvas繪製圖片

 // 保存海報
  savePoster: function() {
    var that = this;
    let promise1 = new Promise(function(resolve, reject) {
      wx.getImageInfo({
        src: that.data.downloadPosterBg,
        success: function(res) {
          console.log(res)
          resolve(res);
        }
      })
    });
    let promise2 = new Promise(function(resolve, reject) {
      wx.getImageInfo({
        src: that.data.downloadHeaderImage,
        success: function(res) {
          console.log(res)
          resolve(res);
        }
      })
    });
    Promise.all([
      promise1, promise2
    ]).then(res => {

      wx.showLoading({
        title: '分享圖片生成中...',
        icon: 'loading',
        duration: 1000
      })
      
      console.log(res)
      /* 圖片獲取成功才執行後續代碼 */
      var canvas = wx.createCanvasContext('hoCanvas')
      // 繪製背景圖
      canvas.drawImage(res[0].path, 0, 0, 628, 838);
      // 繪製圓形頭像
      canvas.save()
      canvas.beginPath()
      canvas.arc(50, 740, 30, 0, 2 * Math.PI)
      canvas.clip()
      canvas.drawImage(res[1].path, 20,710, 60, 60);
      canvas.restore()

      //繪製微信暱稱文本
      canvas.setFontSize(23)
      canvas.setFillStyle("#424E75")
      canvas.setStrokeStyle('#424E75')
      canvas.fillText(this.data.posterNickName, 100, 745,350)

      // 繪製堅持天數
      canvas.setFontSize(23)
      canvas.setFillStyle("#424E75")
      canvas.setStrokeStyle('#424E75')
      canvas.fillText('我已堅持打卡' + this.data.posterDakaCount + '天', 100, 785)
      canvas.draw();

      setTimeout(function() {
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: 628,
          height: 838,
          destWidth: 628,
          destHeight: 838,
          canvasId: 'hoCanvas',
          success: function(res) {
            console.log(res)
            that.setData({
              postUrl: res.tempFilePath,
            })
            that.saveImageToAlbum();
            wx.hideLoading()
          },
          fail: function(res) {
            console.log(res)
          }
        })
      }, 500)
    })
  },

3.調用微信API，保存圖片

  saveImageToAlbum: function() {
    var that = this;
    //將圖片保存到相冊       
    wx.saveImageToPhotosAlbum({
      filePath: that.data.postUrl,
      success(res) {
        wx.showModal({
          title: '保存成功',
          content: '圖片成功保存到相冊了，快去分享朋友圈吧',
          showCancel: false,
          confirmText: '好的',
          confirmColor: '#818FFB',
          success: function(res) {
            if (res.confirm) {
              that.setData({
                showPosterImage: true
              })
            }
            that.hideShareImg()
          }
        })
      }
    })
  },

填坑記錄:

1.在開發過程中，使用了微信的下載文件接口，所以需要在小程序後臺downloadFile合法域名配置圖片域名的白名單（配置後有時間延遲，所以需要耐心等待）。但是，不管是在微信開發工具中還是真機開啓調試模式時候，不配置下載域名白名單功能也是正常。所以記得配置。

2.下載圖片後，一定要通過wx.getImageInfo 來獲取到圖片的信息。不然真機上無法獲取到圖片信息，Canvas 無法繪製。

目前通過Canvas繪製出來的文字和圖片還有些模糊，有抗鋸齒。接下來將會優化，然後再進行補充說明。