微信小程序前端生成动态海报图
//页面显示<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 = 0wx.getSystemInfo({success: function (res) {w = res.screenWidth}})console.log(w);// return falsewx.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].widthconst height = res[0].heightconst rpx =width/750// 初始化画布大小const dpr = wx.getWindowInfo().pixelRatiocanvas.width = width * dprcanvas.height = height * dprctx.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);// 设置图片srcimage.src = that.data.shareImgimgs.src = that.data.userImgUrlqrcodes.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)})},
效果如下:
小程序二维码 头像 班级信息 都是动态生成。

相关文章:
微信小程序前端生成动态海报图
//页面显示<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_i…...
SQL如何导入数据以及第一次上机作业
如何导入excel数据 首先得学会导入数据 使用excel格式不需要改成其它格式(如csv,txt),因为你改了到时候还是会报错(实践过使用Sum统计总数一直说我数据格式有问题) 首先右键TSGL数据库->任务->导入数…...
数据结构-----红黑树简介
目录 前言 1.什么是红黑树? 2.为什么需要红黑树?(与AVL树对比) 3.红黑树的特性 前言 在此之前我们学习过了二叉排序树和平衡二叉树(AVL树),这两种树都是属于搜索树的一种,那么今天…...
哈佛教授因果推断力作:《Causal Inference: What If 》pdf下载
因果推断是一项复杂的科学任务,它依赖于多个来源的三角互证和各种方法论方法的应用,是用于解释分析的强大建模工具,同时也是机器学习领域的热门研究方向之一。 今天我要给大家推荐的这本书,正是因果推断领域必读的入门秘籍&#…...
Drecom 的《Eternal Crypt - Wizardry BC -》加入 The Sandbox 啦!
经典 “Wizardry” 游戏系列的新区块链迭代将通过全球合作拓展 Web3 游戏宇宙。 我们非常高兴地宣布,沙盒游戏公司与富有远见的传奇游戏《Wizardry》系列创造者 Drecom 将建立充满活力的合作伙伴关系。我们将共同推出《Eternal Crypt - Wizardry BC -》,…...
外贸网站流量下降可能是这五点原因造成的
随着互联网的发展,企业开始重视网站优化,越来越多的人开始从事网站优化工作,然而真正做起来,很多站长朋友并非一帆风顺,往往越到很多问题,比如外贸网站流量出现异常下降情况,但很多时候在遇到外…...
交通部 EDI是什么?如何处理?
交通部于1996年开始实施《国际集装箱运输电子信息传输和运作系统及示范工程》,即在中国远洋运输集团、上海口岸、宁波口岸、天津口岸和青岛口岸建立 EDI 示范工程。 交通部 EDI 的数据结构 电子口岸或者其他物流企业需要确保能够生成和解析符合交通部要求的EDI数据…...
【Redis】Java Spring操作redis
目录 引入Redis依赖StringRedisTemplate使用String使用List使用Set使用hash使用zset 引入Redis依赖 StringRedisTemplate 此处RedisTemplate是把这些操作Redis的方法,分成了几个类别,分门别类的来组织的。 此处提供的一些接口风格,和原生的Re…...
如何养好一个微信新号?
最近听到一句话,“微信是个完整的互联网”。 你还真别说,真是。如果你还觉得微信只是个聊天视频打电话的工具,那可就有信息差了。 微信有各种各样的小程序,有打车的,有交话费的,有游戏,可以说&a…...
flutter问题汇总
一直卡在building a flutter app for general distribution; AS Message窗口显示 依赖下载失败: 1、修改仓库地址的配置:android/build.gradle repositories {maven { url https://download.flutter.io }maven { url "https://maven.a…...
2.1 初探大数据
文章目录 零、学习目标一、导入新课二、新课讲解(一)什么是大数据(二)大数据的特征1、Volume - 数据量大2、Variety - 数据多样3、Velocity - 数据增速快4、Value - 数据价值低5、Veracity - 数据真实性 (三࿰…...
论自动化测试中的xpath | 多语言测试最新案例
XPath(XML Path Language)是一门在XML文档中查找信息的语言。XPath是XML处理中非常重要的组成部分,能大大简化文档的解析和处理。它与XSLT、XPointer等标准一起被广泛应用于XML的解析处理。 一般情况下,xpath主要应用在以下几个方…...
CSS基础详细解析(附带综合小练习)
目标:掌握 CSS 属性基本写法,能够使用文字相关属性美化文章页。 01-CSS初体验 层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 文档的呈现(美化内容&#…...
react中ant.design框架配置动态路由
目录 什么是动态路由? 应用场景: ant.design动态路由如何配置: 首先:找到app.tsx文件 然后:找到menuHeaderRender 其次:修改menuHeaderRender为menuDataRender编辑 最后:在箭头函数里re…...
Linux运行环境搭建系列-Openresty安装
安装Openresty 构建环境:腾讯云CentOS 7.9。 更新云库 yum update添加&&安装云库 wget https://openresty.org/package/centos/openresty.repo sudo mv openresty.repo /etc/yum.repos.d/ sudo yum check-update sudo yum install openresty安装命令行工具…...
React TreeSelect设置默认展开项的方法
需要实现TreeSelect组件的onTreeExpand、treeExpandedKeys方法。 代码样例如下: 1.TreeSelect标签部分 render() {const {codeselect} this.props;const {treeExpandedKeys} this.state ................<TreeSelectshowSearch{false}dropdownStyle{{ maxHei…...
Golang基础学习笔记
Golang基础学习笔记 1、下载安装 1.1、下载 Golang下载地址:https://golang.google.cn/dl/ 1.2、安装 1.3、环境变量 # GOPATH D:\GolandProjects# GOPROXY https://mirrors.aliyun.com/goproxy# 启用Go模块支持 go env -w GO111MODULEon1.5、验证安装/配置 1.…...
ES _bulk 批量操作用法
es 的 bulk 操作,是用来批量发送请求,或者理解为批量操作的。 支持4种操作 bulk 支持多种操作,如下create、index、update、delete。 create 如果文档不存在就创建,但如果文档存在就返回错误index 如果文档不存在就创建&#x…...
LCR 176.判断是否为平衡二叉树
题目来源: leetcode题目,网址:LCR 176. 判断是否为平衡二叉树 - 力扣(LeetCode) 解题思路: 若树中任意节点左子树是平衡二叉树,右子树是平衡二叉树 且该节点左右子树平衡,则该树…...
跨境商城源码有哪些独特的功能和优势
1. 强大的跨境支付功能 跨境商城源码具备强大的跨境支付功能,支持多种支付方式,包括信用卡、支付宝、微信支付等。该功能遵循国际支付标准,能够确保支付过程的安全性和可靠性,为用户提供便捷的跨境购物体验。 2. 多语言和多货币支…...
PPTAgent终极指南:如何5分钟完成专业演示文稿的AI智能生成
PPTAgent终极指南:如何5分钟完成专业演示文稿的AI智能生成 【免费下载链接】PPTAgent An Agentic Framework for Reflective PowerPoint Generation 项目地址: https://gitcode.com/gh_mirrors/pp/PPTAgent 你是否曾为制作演示文稿而熬夜加班?是否…...
LEANN:基于选择性重计算的本地向量检索,实现97%存储压缩
1. 项目概述:LEANN,一个重新定义本地向量检索的开源项目如果你和我一样,对当前AI应用生态里动辄需要将个人数据上传到云端、依赖昂贵且臃肿的向量数据库感到厌倦,那么LEANN的出现,绝对会让你眼前一亮。这不仅仅是一个工…...
Windows构建工具终极指南:一键解决Node.js原生模块编译难题
Windows构建工具终极指南:一键解决Node.js原生模块编译难题 【免费下载链接】windows-build-tools :package: Install C Build Tools for Windows using npm 项目地址: https://gitcode.com/gh_mirrors/wi/windows-build-tools Windows-build-tools是一个专业…...
Taotoken助力初创团队以可控成本集成大模型能力
🚀 告别海外账号与网络限制!稳定直连全球优质大模型,限时半价接入中。 👉 点击领取海量免费额度 Taotoken助力初创团队以可控成本集成大模型能力 为产品添加智能对话功能是许多初创团队提升用户体验的关键一步。然而,…...
思源宋体CN:零成本打造专业中文排版的终极秘籍
思源宋体CN:零成本打造专业中文排版的终极秘籍 【免费下载链接】source-han-serif-ttf Source Han Serif TTF 项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf 还在为字体版权费用发愁?还在寻找既能商用又专业的中文字体&…...
Saga状态机设计失效导致订单丢失?DeepSeek内部SRE团队紧急修复的7个隐性陷阱,你中了几个?
更多请点击: https://intelliparadigm.com 第一章:Saga状态机设计失效导致订单丢失?DeepSeek内部SRE团队紧急修复的7个隐性陷阱,你中了几个? Saga 模式在分布式事务中被广泛采用,但 DeepSeek SRE 团队在一…...
告别混乱的SVN日志!保姆级教程:用TortoiseSVN图形界面导出清晰可读的变更记录(含过滤与导出选项详解)
高效管理SVN变更记录:TortoiseSVN图形界面全攻略 在团队协作开发中,版本控制系统扮演着至关重要的角色。SVN(Subversion)作为集中式版本控制的代表,其提交日志记录了项目的完整演进历程。然而,面对杂乱无章…...
Unified Access Control:从NAS到RRC的5G接入控制全流程解析
1. 5G统一接入控制(UAC)的核心逻辑 想象一下你走进一家高级会员制餐厅,服务员会先检查你的会员卡(身份验证),再确认你的预约类型(业务类别),最后根据当天客流情况&#x…...
.NET AES 讲透:从 ECB 到 GCM,到底差在哪?
AES,全称高级加密标准(Advanced Encryption Standard)。简单说,它是目前全球最主流的对称加密算法:同一把钥匙负责加密和解密。 HTTPS、手机文件加密、数据库、云存储……现代互联网里大量“数据保密”场景࿰…...
别再手动整理PDF了!用Zotero+坚果云打造你的免费文献同步工作流
Zotero与坚果云联动:构建无缝文献管理生态系统的终极指南 科研工作者和学生群体常面临一个普遍困境:如何在多台设备间高效同步和管理海量文献资料?传统的手动复制粘贴或依赖收费云服务不仅效率低下,还存在版本混乱的风险。本文将深…...
