2019-01-25

---

layout: post
title: 微信小程序canvas画海报
date: 2019-01-25 14:32:24.000000000 +09:00

---

wx.request({
  url: host + '/wechat/getWXACode',
  data: {
    'page': 'pages/helpCollect/index',
    'scene': params.userid
  },
  method: 'post',
  responseType: 'arraybuffer',
  header: {
    'content-type': 'application/x-www-form-urlencoded' // 默认值
  },
  success: res => {
    const fsm = wx.getFileSystemManager();
    const fileName = wx.env.USER_DATA_PATH + '/share_img.png';
    fsm.writeFileSync(fileName, res.data, 'binary');
    const ctx = wx.createCanvasContext('shareCanvas')
    //背景图:调整小屏幕手机大小5s
    console.log('宽度', this.data.canvasWidth);
    console.log('高度', this.data.canvasHeight);
    //背景图片
    ctx.drawImage('../../assets/image/d_1.jpg', 0, 0, this.data.canvasWidth, this.data.canvasHeight)
    //修改关晓彤尺寸：
    // ctx.drawImage('../../assets/image/d_1.jpg', 0, 0, this.data.canvasWidth, this.data.canvasWidth * 1.61)
    ctx.setTextAlign('left')
    ctx.setFillStyle('#000000') // 文字颜色：黑色
    let fontSize = this.data.canvasHeight < 450 ? 12 : 12;
    let fontWidth = this.data.canvasWidth < 320 ? 10 : 20;
    let nameHW = this.data.canvasHeight < 450 ? this.data.canvasHeight - 80 : this.data.canvasHeight - 100;
    ctx.setFontSize(fontSize) // 文字字号：12px
    
    // 小程序码
    let qrHw = this.data.canvasWidth < 320 ? 65 : 80;
    let qrWidth = this.data.canvasWidth < 320 ? this.data.canvasWidth - 70 : this.data.canvasWidth - 100;
    let qrHeight = this.data.canvasHeight < 450 ? this.data.canvasHeight - 95 : this.data.canvasHeight - 120;
    let caWidth = this.data.canvasWidth < 320 ? this.data.canvasWidth - 90 : this.data.canvasWidth - 110;
    ctx.drawImage(fileName, qrWidth, qrHeight, qrHw, qrHw);
    ctx.fillText("长按识别小程序", caWidth, this.data.canvasHeight - 10)
    //微信头像
    let wxHW = this.data.canvasHeight < 450 ? 30 : 40;
    let wxWidth = this.data.canvasWidth < 320 ? 5 : 10;
    let nickWidth = this.data.canvasHeight < 450 ? wxWidth + 32 : wxWidth + 42;
    ctx.fillText(params.nickName, nickWidth, nameHW)
    ctx.fillText("正在参加这个活动", nickWidth, nameHW + 20)
    ctx.fillText("快来帮我助力吧!", wxWidth, this.data.canvasHeight - 10)
    let wxHeight = this.data.canvasHeight < 450 ? this.data.canvasHeight - 90 : this.data.canvasHeight - 110;
    ctx.drawImage(params.userAvator, wxWidth, wxHeight, wxHW, wxHW);

    ctx.stroke();
    ctx.draw(false, function() {
      //画好后下载到本地：
      const wxCanvasToTempFilePath = wxPromisify(wx.canvasToTempFilePath)
      const wxSaveImageToPhotosAlbum = wxPromisify(wx.saveImageToPhotosAlbum)
      wx.hideLoading();
      wxCanvasToTempFilePath({
        canvasId: 'shareCanvas'
      }, this).then(res => {
        console.log(res);
        return wxSaveImageToPhotosAlbum({
          filePath: res.tempFilePath
        })
      }).then(res => {
        console.log(res);
        wx.showToast({
          title: '已保存到相册'
        })
      }).catch(err => { 

      })
    });