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

这篇具有很好参考价值的文章主要介绍了【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;
}
/*注意：一定要是px，不然在ios和安卓就会有区别*/
.share-canvas {
	width: 720px;
	height: 1280px;
	background: #fff;
	position: fixed;
	left: -720px;
	top: 0;
}

下载uqrcodejs：https://uqrcode.cn/doc/guide/getting-started.html文章来源地址https://www.toymoban.com/news/detail-775790.html

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: 1280,
								success(canvasres) {
									that.csimg = canvasres.tempFilePath
									uni.previewImage({
										urls: [canvasres.tempFilePath]
									})
									uni.hideLoading()
								},
							})
						})
					}
				})
				
			
			
			},
	}
}