微信小程序前端生成动态海报图

 
//页面显示
 
  "myCanvas" type="2d" style=" width: 700rpx; height: 600rpx;" />
 
onShareShow(e){
 
    var that = this;
 
    let user_id = wx.getStorageSync('user_id');
 
    let sharePicUrl = wx.getStorageSync('sharePicUrl');
 
    if(app.isBlank(user_id) || app.isBlank(that.data.ids)){
 
        wx.showToast({
 
          title: '先完善学员信息~', //提示的内容
 
          duration: 2000, //持续的时间
 
          icon: 'error', //图标有success、error、loading、none四种
 
          mask: true //显示透明蒙层 防止触摸穿透
 
      })
 
      return false;
 
    }
 
    // if(!sharePicUrl){
 
      that.createPoster();
 
      return false;
 
    // }
 
    that.showModal();
 
  },
 
  //生成动态海报
 
  createPoster() {
 
    wx.showToast({
 
      title: '图片生成中',
 
      mask: true,
 
      icon: 'loading',
 
      duration: 100000
 
  })
 
    var that =this;
 
    console.log(that.data);
 
    let w = 0
 
    wx.getSystemInfo({
 
      success: function (res) {
 
          w = res.screenWidth
 
      }
 
  })
 
  console.log(w);
 
    // return false
 
    wx.createSelectorQuery()
 
    .select('#myCanvas') // 在 WXML 中填入的 id
 
    .fields({ node: true, size: true })
 
    .exec((res) => {
 
        // Canvas 对象
 
        const canvas = res[0].node
 
        // 渲染上下文
 
        const ctx = canvas.getContext('2d')
 
        // Canvas 画布的实际绘制宽高
 
        const width = res[0].width
 
        const height = res[0].height
 
        const rpx =width/750
 
        // 初始化画布大小
 
        const dpr = wx.getWindowInfo().pixelRatio
 
        canvas.width = width * dpr
 
        canvas.height = height * dpr
 
        ctx.scale(dpr, dpr)
 
        // 图片对象
 
        const image = canvas.createImage()//本地背景图 
 
        const imgs = canvas.createImage() //用户头像
 
        const qrcodes = canvas.createImage()//接口返回二维码图片
 
        // 图片加载完成回调
 
        image.onload = () => {
 
            // 将图片绘制到 canvas 上
 
            ctx.drawImage(image, 0, 0,width,height)
 
            ctx.drawImage(imgs,rpx*140,rpx*260,rpx*170,rpx*200)
 
            ctx.drawImage(qrcodes,rpx*140,rpx*520,rpx*60,rpx*60)
 
            // 文本 一定要写到图片后面 要不然会被盖住
 
            ctx.font = "12px SimHei";
 
            ctx.textAlgin = "left"
 
            ctx.fillStyle = "#333333";
 
            ctx.fillText(that.data.userClassInfo.user_name.substr(0,8), rpx*340, rpx*330);
 
            ctx.fillText(that.data.userClassInfo.userSubject.substr(0,8), rpx*340, rpx*410);
 
            ctx.fillText(that.data.userClassInfo.className.substr(0,10), rpx*340, rpx*480);
 
        }
 
        console.log(that.data);
 
        // 设置图片src
 
        image.src = that.data.shareImg
 
        imgs.src = that.data.userImgUrl
 
        qrcodes.src = that.data.qrcode
 
        //没加定时器之前合成的图片是一片灰色，加了之后才有图片，测试了一下最少需要400毫秒
 
        setTimeout(()=>{
 
          wx.canvasToTempFilePath({
 
            canvas: canvas,
 
            success: res => {
 
                wx.hideToast();
 
                // 生成的图片临时文件路径
 
                this.setData({
 
                  sharePicUrl:res.tempFilePath
 
                }) 
 
                wx.setStorageSync('sharePicUrl', res.tempFilePath);
 
                that.showModal();
 
            },
 
        })
 
        },1000)
 
    })
 
},

效果如下：

小程序二维码 头像  班级信息 都是动态生成。