微信小程序之生成專屬推廣海報

現在老闆一般都需要線上推廣功能，通過給用戶好處來刺激用戶裂變分銷，這就需要我們給用戶生成專屬的推廣海報
因爲小程序的用戶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代碼就不寫了，每個人風格都不一樣，我的最終效果是就是這樣，二維碼是每個人單獨的，剩下的就讓後臺去處理後續的業務邏輯就好了