小程序端生成海报

//前端canvas  

let that = this;
    wx.showToast({
      title: '海报生成中...',
      icon: 'loading',
      duration: 2000
    });
    const ctx = wx.createCanvasContext('canvas_poster');
    ctx.clearRect(0, 0, 0, 0);
    //  绘制图片模板的 底图
    ctx.drawImage('/image/poster_bg.jpg', 0, 0, 270, 314);
    //  绘制顶部banner
    ctx.drawImage(that.data.banner, 0, 0, 270, 154);
   //绘制视频名称
    ctx.setTextAlign('left')
    ctx.setFontSize(14);
    ctx.fillText(`${that.data.item.videoName}`, 9, 173);
   //绘制横线
    ctx.moveTo(0, 188)
    ctx.lineTo(270, 188);
    ctx.setLineWidth(1)
    ctx.setStrokeStyle('rgb(239,239,239)')
    ctx.stroke();

    ctx.moveTo(0, 236)
    ctx.lineTo(270, 236);
    ctx.setLineWidth(1)
    ctx.setStrokeStyle('rgb(239,239,239)')
    ctx.stroke()

    //绘制头像
    ctx.save();
    ctx.beginPath();
    let r = 13;
    let d = r * 2;
    let cx = 9;
    let cy = 194;
    ctx.arc(cx+r, cy + r, r, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(that.data.headerImg, cx, cy, d, d);
    ctx.restore();
   //绘制昵称时间
    ctx.setTextAlign('left')
    ctx.setFontSize(12);
     ctx.setFillStyle('rgb(30,30,52)')
     ctx.fillText(`${that.data.item.name}`, 45, 204);
    ctx.setFontSize(12);
    ctx.setFillStyle('rgb(200,200,200)')
    ctx.fillText(`${that.data.item.time}`, 45, 222);

    //  绘制小程序码
    ctx.drawImage(that.data.wxcodePic, 18, 240, 71, 71);
    //  绘制二维码右边说明
    ctx.setTextAlign('left')
    ctx.setFontSize(14);
    ctx.setFillStyle('rgb(255,131,56)')
    ctx.fillText(`${that.data.item.MicroName}`, 100, 264);
    ctx.setFontSize(14);
    ctx.setFillStyle('rgb(51,51,51)')
    ctx.fillText('长按识别小程序码访问', 100, 290);
    ctx.draw();

//生成海报的封面图缓存到本地
  getbanner(url, that) {    //  图片缓存本地的方法
    if (typeof url === 'string') {
      wx.getImageInfo({   //  小程序获取图片信息API
        src: url,
        success: function (res) {
          that.setData({
            banner: res.path
          })
        },
        fail(err) {
          console.log(err)
        }
      })
    }
  },

 

 //保存图片至相册
  savePoster:function(e){
    setTimeout(function () {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 270,
        height: 314,
        destWidth: 810,
        destHeight: 942,
        quality:1,
        canvasId: 'canvas_poster',
        fileType: 'png',
        success: function (res) {
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success(res) {
              wx.hideLoading();
              wx.showToast({
                title: '保存成功',
              });
            },
            fail() {
              wx.hideLoading()
            }
          })
        }
      })
    }, 500);
  }