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

html 复制代码
 
//页面显示

  <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)

    })

},

效果如下:

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

相关推荐
naice7 分钟前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼11 分钟前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin16 分钟前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗19 分钟前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀69632 分钟前
CSS-响应式布局
前端
三小河37 分钟前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法41 分钟前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku42 分钟前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小文刀6961 小时前
2025-35st-w-日常开发总结
前端
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js