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

html 复制代码
<!-- 二维码 -->
		<canvas id="qrcode" canvas-id="qrcode" width="120" ></canvas>

		<!-- 生成带小程序码的分享图片 -->
		<canvas canvas-id="shareCanvas" class="share-canvas"></canvas>
css 复制代码
#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

js 复制代码
import UQRCode from 'uqrcodejs'; 
export default{
	data(){
		return{
			val: 'https', // 要生成的二维码的地址
			src: '', // 二维码生成后的图片地址或base64
			bgUrl:'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 = true
				that.iconlogo = true
				//创建canvas
				let 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*像素比21067
								destHeight: 1300,
								success(canvasres) {
									that.csimg = canvasres.tempFilePath
									uni.previewImage({
										urls: [canvasres.tempFilePath]
									})
									uni.hideLoading()
								},
							})
						})
					}
				})
				
			
			
			},
	}
}
相关推荐
iOS阿玮2 小时前
苹果卡审情况将逐步缓解,合规的开发者请耐心等待~
uni-app·app·apple
じòぴé南冸じょうげん4 小时前
小程序的project.private.config.json是无依赖文件,那可以删除吗?
前端·小程序·json
2501_916013744 小时前
HTTPS 抓包难点分析,从端口到工具的实战应对
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915918417 小时前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张7 小时前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
微三云-轩8 小时前
区块链:重构企业数字化的信任核心与创新动力
人工智能·小程序·区块链·生活·我店
耶啵奶膘1 天前
uni-app头像叠加显示
开发语言·javascript·uni-app
chéng ௹1 天前
uniapp 封装uni.showToast提示
前端·javascript·uni-app
吴传逞1 天前
记一次uniapp+nutui-uniapp搭建项目
uni-app
雪芽蓝域zzs1 天前
uni-app倒计时公共组件 封装,倒计时组件
uni-app