微信小程式生成用戶帶自己二維碼的海報

效果圖

• wxml

<canvas class="canvas-poster" id="canvasPoster" canvas-id="canvasPoster"></canvas>

<image src="{{poster}}" style="width: 500rpx; height: 889rpx;"></image>

• 下載海報背景圖片

  /**
   * 下載背景海報
   */
  downloadBGImg: function (phoneNumber) {
    var that = this;
    wx.downloadFile({
      //服務器圖片地址
      url: "你服務器IP/bj.png",
      success: function (res) {
        console.log(res);
        var rr = res.tempFilePath;
        that.shareInfo.bgImg = rr;
        //下載中間的二維碼
        that.downloadInviteImg(phoneNumber,true);
      }
    })
  },

• 下載用戶二維碼圖片

  /**
   * 下載用戶二維碼圖片
   * @param {電話號碼} phoneNumber 
   * @param {*未找到時 是否請求下載} flag 
   */
  downloadInviteImg: function (phoneNumber,flag) {
    var that = this;
    wx.downloadFile({
      //用戶二維碼圖片,我是用每個用戶的電話號碼分類圖片
      url:phoneNumber + ".png",
      success: function (res) {
        console.log(res);
        if (res.statusCode == 200) {
          var rr = res.tempFilePath;
          that.shareInfo.qrcode = rr;
          var query = wx.createSelectorQuery()
          query.select('#canvasPoster').boundingClientRect((res) => {
            //繪制海報
            that.drawImage(res)
          }).exec();
        } else {
          if(flag==true){
            //用戶二維碼圖片是從騰訊服務器那邊下載然后存到本地的服務器，所以用戶第一次請求二維碼圖    
            //片時，本地服務器是沒有的，呼叫此方法將二維碼圖片下載到本地服務器
            that.getQrcode(phoneNumber);
          }
        }

      }
    })
  },

• 繪制海報

  /**
   * 繪制海報
   */     
 drawImage(canvasAttrs) {
    var that = this;
    wx.getSystemInfo({
      success(res) {
        // 通過像素比計算出畫布的實際大小（330x490）是展示的出來的大小
        that.systemInfo = res
      }
    })
    let ctx = wx.createCanvasContext('canvasPoster', this)
    let canvasW = canvasAttrs.width // 畫布的真實寬度
    let canvasH = canvasAttrs.height //畫布的真實高度
    let headerW = 48 * this.systemInfo.pixelRatio
    let qrcodeW = 300
    let qrcodeX =  (canvasW - qrcodeW)/2 //定位到中間
    let qrcodeY = canvasH/14*8
    // 填充背景
    ctx.drawImage(this.shareInfo.bgImg, 0, 0, canvasW, canvasH)
    ctx.save()
    ctx.drawImage(this.shareInfo.qrcode, qrcodeX, qrcodeY, qrcodeW, qrcodeW)
    ctx.save()
    //繪制邀請文字  此處的邀請碼是顯示在二維碼下方的，用戶二維碼本身是帶有同樣邀請碼的(服務器完成)
    let msg="邀請碼 : "+this.data.myInviteCode;
    //計算文本長度
    ctx.setFontSize(30);
    let msgLength=ctx.measureText(msg).width;
    let textWidth= (canvasW - msgLength)/2 ;
    let textHeight = canvasH/15*13
      //繪制文字背景 =>圓角矩形
      this.roundRect(ctx,textWidth-20, textHeight-42.5, msgLength+35, 60,35,'#dd555a');
      ctx.setFillStyle('#ffffff');
      //繪制文字
    ctx.fillText(msg, textWidth, textHeight)
    ctx.draw()
    setTimeout(() => {
      wx.canvasToTempFilePath({
        canvasId: 'canvasPoster',
        x: 13,
        y: 13,
        width: canvasW - 26,
        height: canvasH - 26,
        destWidth: canvasW - 26,
        destHeight: canvasH - 26,
        success: (res) => {
          that.setData({
            poster: res.tempFilePath,
            showBoxView: true
          })
          wx.hideLoading();
        }
      })
    }, 200)
  },

 /**
 * 繪制圓角矩形
 * @param {Object} ctx - canvas組件的繪圖背景關系
 * @param {Number} x - 矩形的x坐標
 * @param {Number} y - 矩形的y坐標
 * @param {Number} w - 矩形的寬度
 * @param {Number} h - 矩形的高度
 * @param {Number} r - 矩形的圓角半徑
 * @param {String} [c = 'transparent'] - 矩形的填充色
 */
roundRect(ctx, x, y, w, h, r, c = '#fff') {
  if (w < 2 * r) { r = w / 2; }
  if (h < 2 * r) { r = h / 2; }

  ctx.beginPath();
  ctx.fillStyle = c;

  ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
  ctx.moveTo(x + r, y);
  ctx.lineTo(x + w - r, y);
  ctx.lineTo(x + w, y + r);

  ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
  ctx.lineTo(x + w, y + h - r);
  ctx.lineTo(x + w - r, y + h);

  ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
  ctx.lineTo(x + r, y + h);
  ctx.lineTo(x, y + h - r);

  ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
  ctx.lineTo(x, y + r);
  ctx.lineTo(x + r, y);

  ctx.fill();
  ctx.closePath();
},