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

前言

**
目前小程序只支持卡片方式分享到聊天页面，官方不知道何时会新增分享朋友圈方式。最近有个需求要分享到朋友圈，现在大家的通用做法就是通过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绘制出来的文字和图片还有些模糊，有抗锯齿。接下来将会优化，然后再进行补充说明。