微信小程序之生成专属推广海报

现在老板一般都需要线上推广功能，通过给用户好处来刺激用户裂变分销，这就需要我们给用户生成专属的推广海报
因为小程序的用户uid是唯一的并且是不变的，所以我们后台大哥就以用户的uid作为生成专属二维码的图片名称，这里我们用canvas来绘制海报，废话不多说，上前端代码：
wxml:

<view class='box'>
    <canvas canvas-id='post' style='width:750rpx;height:1334rpx;'></canvas>
    <view style='width:100%;text-align:center;color:#cc181d;font-size:24rpx;margin-top:15rpx;'>这是您的专属二维码，将图片保存至手机后发朋友圈推广</view>
    <button class='btn' bindtap='save'>保存图片</button>
</view>

js:

data: {
    src1: 'https://www.qiaolibeilang.com/qrcode/',
    src3: '.png',
  },

  onLoad: function (options) {
    var that = this
    var winWidth = wx.getSystemInfoSync().windowWidth;// 获取当前设备的可视宽度
    var winHeight = wx.getSystemInfoSync().windowHeight;// 获取当前设备的可视高度
    that.setData({
      winWidth: winWidth,
      winHeight: winHeight
    })
    let promise1 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: 'https://www.qiaolibeilang.com//public/uploads/images/20180809/free.png',
        success: function (res) {
          resolve(res);
        }
      })
    });

    let promise2 = new Promise(function (resolve, reject) {
      var uid = wx.getStorageSync('uid')
      console.log(uid)
      wx.getImageInfo({
        src: that.data.src1 + uid + that.data.src3,
        success: function (res) {
          resolve(res);
        }
      })
    });

    Promise.all([
      promise1, promise2
    ]).then(res => {
      var that = this
      var winWidth = wx.getSystemInfoSync().windowWidth;// 获取当前设备的可视宽度
      var winHeight = wx.getSystemInfoSync().windowHeight;// 获取当前设备的可视高度
      that.setData({
        winWidth: winWidth,
        winHeight: winHeight
      })
      console.log(winWidth)
      console.log(winHeight)
      const ctx = wx.createCanvasContext('post')
      ctx.setFillStyle('red')
      ctx.drawImage(res[0].path, 0, 0, that.data.winWidth, that.data.winWidth * 1.778)
      ctx.drawImage(res[1].path, that.data.winWidth - 160, that.data.winWidth * 1.778 - 105, 80, 80)
      console.log(res)
      ctx.draw(true)
    })
  },
  save: function (e) {
    var that = this
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      canvasId: 'post',
      success: function (res) {
        // 获得图片临时路径
        console.log(res.tempFilePath)
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            console.log(res);
            wx.showToast({
              title: '保存成功',
            });
          },
          fail(res) {
            console.log("保存图片：fail");
            console.log(res);
          }
        })
      }

    })
  },

wxss代码就不写了，每个人风格都不一样，我的最终效果是就是这样，二维码是每个人单独的，剩下的就让后台去处理后续的业务逻辑就好了