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

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 分钟前
Vue3纯前端同源跨窗口通信移动AGV小车
前端·vue.js·状态模式
h_k100862 分钟前
Chrome 插件开发入门技术文章大纲
前端·chrome
一只小阿乐2 分钟前
vue-router 的实现原理
前端·javascript·vue.js·路由·vue-router
Zz_waiting.3 分钟前
案例开发 - 日程管理 - 第七期
开发语言·前端·javascript·vue.js·html·路由
一只小风华~6 分钟前
Vue:事件处理机制详解
前端·javascript·vue.js·typescript·前端框架
dy17174 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918418 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
2501_915106328 小时前
iOS 使用记录和能耗监控实战,如何查看电池电量消耗、App 使用时长与性能数据(uni-app 开发调试必备指南)
android·ios·小程序·uni-app·cocoa·iphone·webview
程序员的世界你不懂8 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技8 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育