【uniapp小程序-生成二维码+多个图片文字合并一张图】

<!-- 二维码 --><canvas id="qrcode" canvas-id="qrcode" width="120" ></canvas><!-- 生成带小程序码的分享图片 --><canvas canvas-id="shareCanvas" class="share-canvas"></canvas>
#qrcode{opacity: 0;position: absolute;left: -800rpx;
}
.share-canvas {width: 720px;height: 1280px;background: #fff;position: fixed;left: -720px;top: 0;
}

下载uqrcodejs:https://uqrcode.cn/doc/guide/getting-started.html

import UQRCode from 'uqrcodejs'; 
export default{data(){return{val: 'https', // 要生成的二维码的地址src: '', // 二维码生成后的图片地址或base64bgUrl:'https',//背景图片}},methods:{andImg() {//分享生成图片uni.showLoading({title: "正在生成图片"})if(this.activity_id==11){// 获取uQRCode实例var qr = new UQRCode();// 设置二维码内容qr.data = this.val// 设置二维码大小,必须与canvas设置的宽高一致qr.size = 120;// 调用制作二维码方法qr.make();// 获取canvas上下文var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件,this必须传入// 设置uQRCode实例的canvas上下文qr.canvasContext = canvasContext;// 调用绘制方法将二维码图案绘制到canvas上qr.drawCanvas();this.$nextTick(()=>{uni.canvasToTempFilePath({canvasId: 'qrcode',width: 120,height: 120,success: res => {if(res.errMsg=='canvasToTempFilePath:ok'){this.src = res.tempFilePath//获取生成的二维码地址this.onImg()}},fail: err => {console.log(err);}}, );})},onImg() {function toFormateStr (ctx, str, draw_width, lineNum, startX, startY, steps ) {var strWidth = ctx.measureText(str).width;     // 测量文本源尺寸信息(宽度)var startpoint = startY, keyStr = '', sreLN = strWidth / draw_width;var liner = Math.ceil(sreLN);     // 计算文本源一共能生成多少行let strlen = parseInt(str.length / sreLN); 	// 等比缩放测量一行文本显示多少个字符// 若文本不足一行,则直接绘制,反之大于传入的最多行数(lineNum)以省略号(...)代替if (strWidth  < draw_width) {ctx.fillText(str, startX, startpoint);} else {for (var i = 1; i < liner + 1; i++) {let startPoint = strlen * (i-1);if (i < lineNum || lineNum == -1) {keyStr = str.substr(startPoint, strlen);ctx.fillText(keyStr, startX, startpoint);} else {keyStr = str.substr(startPoint, strlen-5) + '...';ctx.fillText(keyStr, startX, startpoint);break;}startpoint = startpoint + steps;}}}const that = this//绘制图片that.csimg = truethat.iconlogo = true//创建canvaslet shareCanvas = uni.createCanvasContext('shareCanvas')//绘制背景图片//canvas绘制图片(drawImage)无效,显示不了,//uniapp的drawImage绘制图片和微信小程序一样,图片路径不能使用网络路径,必须先下载到本地(使用uni.downloadFile()下载成临时文件路径也行)uni.downloadFile({url:that.bgUrl,success(res){shareCanvas.drawImage(res.tempFilePath, 0, 120, 720, 1280)if(that.companyInfo.company_abbr){if(that.companyInfo.company_abbr.length <= 6){shareCanvas.setFontSize('56')}else if(that.companyInfo.company_abbr.length > 6 && that.companyInfo.company_abbr.length <= 10){shareCanvas.setFontSize('48')}else if(that.companyInfo.company_abbr.length > 10 && that.companyInfo.company_abbr.length <= 15){shareCanvas.setFontSize('32')}else if(that.companyInfo.company_abbr.length > 15){shareCanvas.setFontSize('26')}}shareCanvas.setTextAlign('center')// 公司名称function title() {const grds = shareCanvas.createLinearGradient(360, 795, 360, 826)shareCanvas.setFontSize('36')shareCanvas.setFillStyle('#e7c998')toFormateStr(shareCanvas, that.companyInfo.company_abbr, 400, 3, 360, 620, 40);}// 奖项function prize_title() {const grds = shareCanvas.createLinearGradient(360, 795, 360, 826)shareCanvas.setFontSize('36')shareCanvas.setFillStyle('#e7c998')toFormateStr(shareCanvas,that.companyInfo.prize.prize_title, 400, 3,360, 800, 40);}if(that.companyInfo.company_abbr){title()}prize_title()shareCanvas.setFontSize('24')shareCanvas.drawImage(that.src, 300, 1045, 120, 120)shareCanvas.draw(false, () => {uni.canvasToTempFilePath({canvasId: "shareCanvas",destWidth: 720, //分享图片尺寸=画布尺寸1*缩放比0.5*像素比21067destHeight: 1300,success(canvasres) {that.csimg = canvasres.tempFilePathuni.previewImage({urls: [canvasres.tempFilePath]})uni.hideLoading()},})})}})},}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/239828.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity网络同步方案帧同步和状态同步

网络同步方案 介绍开始我们使用的状态同步&#xff08;实时状态同步&#xff09;后来采用的帧同步 状态同步优点缺点 帧同步顺序执行追帧重连优点缺点 总结 这两年做的都是帧同步和状态同步的项目&#xff0c;正好最近有时间总结一下什么是帧同步和状态同步&#xff0c;之前在做…

内核地址消毒剂(KASAN)

概述 Kernel Address SANitizer(KASAN)是一种动态内存安全错误检测工具,主要功能是 检查内存越界访问和使用已释放内存的问题。 KASAN有三种模式: 通用KASAN 基于软件标签的KASAN 基于硬件标签的KASAN 用CONFIG_KASAN_GENERIC启用的通用KASAN,是用于调试的模式,类似于用户…

SolidKits.BOMs工具—BOM及焊件切割清单输出

SolidKits.BOMs工具—BOM及焊件切割清单输出包含自动出BOM&#xff0c;自定义模板&#xff0c;焊件切割清单的输出&#xff0c;虚拟件的输出等功能&#xff0c;使用该功能&#xff0c;无需打开SOLIDWORKS软件&#xff0c;可大大提高工作效率。为回馈新老客户&#xff0c;此工具…

Ubuntu 常用命令之 exit 命令用法介绍

&#x1f4d1;Linux/Ubuntu 常用命令归类整理 exit命令在Ubuntu系统下用于结束一个终端会话。它可以用于退出当前的shell&#xff0c;结束当前的脚本执行&#xff0c;或者结束一个ssh会话。 exit命令的参数是一个可选的整数&#xff0c;用于指定退出状态。如果没有指定&#…

基于ip地址通过openssl生成自签名证书

最近在配置geo的时候&#xff0c;客户说自己使用的是自签证书&#xff0c;然后是通过ip地址和端口的方式访问gitlab&#xff0c;比较好奇这块&#xff0c;因此对证书的生成和使用做了一些整理&#xff0c;对此网上关于这部分资料也很多&#xff0c;不过作为记录&#xff0c;也算…

美国的目的暴露了,夺下6台EUV光刻机推进2纳米,反超台积电

日前消息指光刻机巨头ASML预计明年量产10台第二代EUV光刻机&#xff0c;其中6台已确定被美国芯片企业Intel夺下&#xff0c;剩下的两台将由三星和台积电竞争&#xff0c;如此一来拿到更多第二代EUV光刻机的美国可望率先量产2纳米&#xff0c;反超台积电。 一、第二代EUV光刻机的…

Pytorch项目,肺癌检测项目之二

diameter_dict{} with open(/xunlian/annotations.csv &#xff0c;‘r’) as f: for row in list(csv.reader(f)[1:]): series_uid row[0] annotationCenter_xyz tuple([float(x) for x in row[1:4]]) annotationDiameter_mm float(row[4]) diameter_dict.setdefault(seri…

Qt中字符串转换为JS的函数执行

简介 在 QML 中&#xff0c;将 JavaScript 字符串转换为函数通常涉及使用 Function 构造函数或 eval() 函数。但是&#xff0c;QML 的环境对 JavaScript 的支持有一定的限制&#xff0c;因此不是所有的 JavaScript 功能都可以在 QML 中直接使用。 以下介绍都是在Qt5.12.1…

Spring简介

一&#xff1a;Spring是什么 Spring是分层的Java SE/EE应用full-stack&#xff08;各层都有对应解决方案&#xff09;轻量级&#xff08;api较少&#xff0c;学习成本较低&#xff09;开源框架&#xff0c;以IOC&#xff08;Inverse Of Control:反转控制&#xff09;和AOP(Asp…

最新Unity DOTS Physics物理引擎碰撞事件处理

最近DOTS发布了正式的版本,同时基于DOTS的理念实现了一套高性能的物理引擎&#xff0c;今天我们给大家分享和介绍一下这个物理引擎的碰撞事件处理以及核心相关概念。 Unity.Physics物理引擎的主要流程与Pipeline Unity.Physics物理引擎做仿真迭代计算的时候主要通过以下步骤来…

基于SpringBoot简洁优雅的个人博客系统

源代码下载地址&#xff1a; 点击这里下载 项目备注 1、该资源内项目代码都经过测试运行成功&#xff0c;功能ok的情况下才上传的&#xff0c;请放心下载使用&#xff01; 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或…

java八股jvm

JVM虚拟机篇-01-JVM介绍、运行流程_哔哩哔哩_bilibili 1.PC程序计数器 2.堆 3.虚拟机栈 4.方法区/永久代/元空间 5.直接内存 JVM虚拟机篇-06-JVM组成-你听过直接内存吗_哔哩哔哩_bilibili 6.双亲委派 从下往上找&#xff0c;有同名类优先使用上级加载器的&#xff0c;不用自…

【SpringBoot篇】基于Redis实现生成全局唯一ID的方法

文章目录 &#x1f354;生成全局唯一ID&#x1f339;为什么要生成全局唯一id&#x1f33a;生成全局id的方法✨代码实现 &#x1f354;生成全局唯一ID 是一种在分布式系统下用来生成全局唯一id的工具 在项目中生成全局唯一ID有很多好处&#xff0c;其中包括&#xff1a; 数据…

***linux 配置服务开机自启动

目录 一、如何让一个服务或脚本开机自启动&#xff1f; 1. 三种解决方案 2. systemd 和 chkconfig 二、chkconfig 1. chkconfig 管理服务脚本要求 2. chkconfig命令 三、Linux 运行级别 四、参考 linux 配置服务开机自启动&#xff08;systemd 和 chkconfig --add 设置…

sql-labs服务器结构

双层服务器结构 一个是tomcat的jsp服务器&#xff0c;一个是apache的php服务器&#xff0c;提供服务的是php服务器&#xff0c;只是tomcat向php服务器请求数据&#xff0c;php服务器返回数据给tomcat。 此处的29-32关都是这个结构&#xff0c;不是用docker拉取的镜像要搭建一下…

【Python】异常、模块与包

一、异常的概念 二、异常的捕获方法 三、异常的传递 四、Python模块 五、Python包 六、安装第三方Python包 一、异常的概念 什么是异常&#xff1a; 异常就是程序运行的过程中出现了错误bug是什么意思&#xff1a; bug就是指异常的意思&#xff0c;因为历史因为小虫子导致计算…

java.lang.NullPointerException出现的原因及解决方案

java.lang.NullPointerException出现的原因及解决方案 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;在编程的世界里&#xff0c;我们常常遇到NullPointerExceptio…

ansible-playbook的Temlates模块 tags模块 Roles模块

Temlates模块 jinja模板架构&#xff0c;通过模板可以实现向模板文件传参(python转义)把占位符参数传到配置文件中去,生产一个目标文本文件&#xff0c;传递变量到需要的配置文件当中 &#xff08;web开发&#xff09; nginx.conf.j2 早文件当中配置的是占位符&#xff08;声明…

Error in `arrange()`: ! Can‘t transform a data frame with `NA` or `““` names.

问题&#xff1a;给Taxonomy排序&#xff0c;并筛选OTU表中存在的 根据提示运行&#xff1a;rlang::last_error()&#xff0c;显示&#xff1a; Backtrace:▆1. ├─dplyr::arrange(taxonomy, phylum, class, order, family, full)2. ├─dplyr:::arrange.data.frame(taxonom…

【SpringBoot篇】解决缓存击穿问题① — 基于互斥锁方式

文章目录 &#x1f339;什么是缓存击穿&#x1f33a;基于互斥锁解决问题&#x1f6f8;思路 &#x1f3f3;️‍&#x1f308;代码实现 &#x1f339;什么是缓存击穿 缓存击穿是指在使用缓存系统时&#xff0c;对一个热点数据的高并发请求导致缓存失效&#xff0c;多个请求同时访…