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

 
//页面显示

  <canvas id="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)

    })

},

效果如下：

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