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

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)

    })

},

效果如下:

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

相关推荐
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm1 小时前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
小皮侠1 小时前
nginx的使用
java·运维·服务器·前端·git·nginx·github