小程序目前还不支持分享到朋友圈，因此必须通过生成海报的形式进行分享。

本次项目要求，音频课程可以分享到朋友圈，分享的海报为一个基础海报模版＋个人专属二维码，以便进行分销。海报如下图，点击分享到朋友圈，生成海报

合成的海报如下

开发思路：

• 每个课程的海报肯定不一样，需要在后台进行分享的海报配置，包括：海报背景图url及宽高、海报中二维码所在坐标（x,y），二维码的宽高

• 当用户点击分享到朋友圈时，拉取海报的分享配置，生成专属二维码，保存到用户手机相册
  

核心代码：

wxml

绘制海报需要用到canvas，因此现在wxml中加入一个canvas，canvas的宽高由后台海报配置决定

<canvas  canvas-id="haibao"  class='canvas' style='width:{{share_info.max_width}}px;height:{{share_info.max_height}}px'></canvas>

wxss

canvas只是用来绘制图片，我们并不希望用户看到，因此可以通过css让其从屏幕中隐藏

.canvas{
  position: fixed;
  top: 9999px;
}

js

下载图片：通过wx.getImageInfo，下载背景图和专属二维码图片（图片地址必须时https，且域名要在后台配置－downloadFile域名），res.path就是下载之后的图片路径，可以绘制到canvas上

wx.getImageInfo({
  src: '',
  success:function(res){
    console.log(res.path)
  }
})

多张图片下载可以通过Promise.all()进行，多个图片都下载成功在进行绘制，其中wxapi是我自己做的一个封装，主要就是以promise的形式调用微信接口，你可以换成wx.getImageInfo的形式

Promise.all([
  wxapi('getImageInfo', {
    src: that.data.share_info.bg
  }),
  wxapi('getImageInfo', {
    src: qrcode
  }),
]).then(res=>{

    res[0].path//第1个图片的路径
    res[1].path//第2个图片的路径
})

绘制到canvas，调用draw后才是真正绘制

const ctx = wx.createCanvasContext('haibao', that)
ctx.drawImage(res[0].path, 0, 0, this.data.max_width, this.data.max_height)
ctx.drawImage(res[1].path, this.data.qr_left, this.data.qr_top, this.data.qr_width, this.data.qr_height)
ctx.draw()

绘制成功之后保存到用户手机相册，绘制成功需要使用drwa的成功回调ctx.draw(false,callback)

通过接口canvasToTempFilePath，将canvas进行保存

通过saveImageToPhotosAlbum，将canvas保存的图片存储到用户手机相册

ctx.draw(false, () => {
  wxapi('canvasToTempFilePath', {
    canvasId: 'haibao'
  }).then(res => {

  wxapi('saveImageToPhotosAlbum', {
    filePath: res.tempFilePath
  })
 
})

完整核心代码，生成图片前，先通过后台接口获取海报配置和专属二维码：

wx.showLoading({
                title: '下载海报模版中...',
                mask: true
              })
              Promise.all([
                wxapi('getImageInfo', {
                  src: that.data.share_info.bg
                }),
                wxapi('getImageInfo', {
                  src: qrcode
                }),
              ]).then(res => {

                wx.showLoading({
                  title: '合成海报中...',
                  mask: true
                })
                const ctx = wx.createCanvasContext('haibao', that)
                ctx.drawImage(res[0].path, 0, 0, that.data.share_info.max_width, that.data.share_info.max_height)
                ctx.drawImage(res[1].path, that.data.share_info.qr_left, that.data.share_info.qr_top, that.data.share_info.qr_width, that.data.share_info.qr_height)
                ctx.draw(false, () => {
                  wxapi('canvasToTempFilePath', {
                    canvasId: 'haibao'
                  }).then(res => {

                    wxapi('saveImageToPhotosAlbum', {
                      filePath: res.tempFilePath
                    }).then(() => {
                      wx.hideLoading()
                      wx.showModal({
                        title: '提示',
                        content: '海报已保存至相册，可以去发朋友圈啦',
                        showCancel: false
                      })
                    }).catch(()=>{
                      wx.hideLoading()
                    })
                  })

                })


              }).catch(()=>{
                wx.hideLoading()
                wx.showToast({
                  title: '海报模版下载失败',
                })
              })