uniapp vue3.2+ts+uqrcode生成二维码合成海报 h5端和app端通用（只测试了安卓）

<template>
 <view class="page">
<uni-popup ref="popup" type="center">
		 <view class="invitePoster">
			<image @click="cacel"
			  class="closeIcon" src="../../static/common/Btn_Close.png" mode=""></image>
			  <!-- #ifdef H5 -->
			   <!-- h5端部分机型用uniappimg标签无法长按保存，用回原生img标签 -->
			  
				<img  class="strategyImgs" :src="data.imgURL" />
			  <!-- #endif -->
			  <!-- #ifdef APP -->
			    <image class="strategyImgs" :src="data.imgURL" mode="widthFix"></image>
			  <!-- #endif -->
			<!-- #ifdef APP -->
				  <view class="popupInfo">
				  	<view class="buttons">
				  		<view class="button1" @click="download">
				  			<text>下载海报</text>
				  		</view>
				  	</view>
				  </view>
			<!-- #endif -->
		 </view>
	 </uni-popup>
	 <!-- 组件方式生成海报和二维码，需在页面添加标签，并且生成后会直接在页面显示出来，（放在页面下方，并且阻止用户滑动下去发现。如果标签没有生成是不会画图的，只能这样取巧挡住用户发现）因此生成海报后隐藏两个标签 也可以把标签放在弹窗里面直接当做海报生成出来，但需自己调试 -->
	  <canvas  ref="myCanvas" canvas-id="myCanvas" v-show="data.showcanvas"
	    style="width: 563rpx;height: 1001rpx;margin-top: 100px;"></canvas>
	    
	    <uqrcode ref="uqrcodeRef" style="margin-top: 100px;" v-show="data.showcanvas"
	      canvas-id="uqrcode" value="123" :options="{ margin: 2 }"></uqrcode>
	 
 </view>
</template>
<script lang='ts' setup>
//组件方式生成二维码 直接引入uqrcode.js即可使用
import { ref ,computed,onMounted} from "vue"
import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
const popup = ref(null)
	const uqrcodeRef = ref(null)
	const data = ref({
		isShowPopup:false,
		qrCodeUrl:"",
		imgURL:'',
		showcanvas:true
	})
	const APPsetImage = () => {
	if (data.value.imgURL) {
		return
	}
	
	const codeData = "二维码需要的内容"
	const qr = new UQRCode()
	console.log(qr);
	// 设置二维码内容
	qr.data = codeData;
	// 设置二维码大小，必须与canvas设置的宽高一致
	qr.size = 200;
	// 调用制作二维码方法
	qr.make();
	// 获取canvas上下文
	var canvasContext = uni.createCanvasContext('uqrcode', this); // 如果是组件，this必须传入
	// 设置uQRCode实例的canvas上下文
	qr.canvasContext = canvasContext;
	qr.drawCanvas().then((res)=>{
		console.log(res);
	})
	setTimeout(() => {
	uni.canvasToTempFilePath(
	    {
	        canvasId: 'uqrcode',
	        success: res => {
	            console.log(res.tempFilePath);
				// 调用绘制方法将二维码图案绘制到canvas上
				let imgUrl = '../../static/invite/Bg_Sharepop.png';//背景图片
				let posterQrCodeImg = res.tempFilePath;//二维码
				const ctx = uni.createCanvasContext('myCanvas', this);
				console.log(posterQrCodeImg,22222);
				uni.getImageInfo({
				  src: imgUrl,
				  success(res) {
					//先画背景图片
					ctx.drawImage(res.path, 0, 0, 310, 556)
					ctx.drawImage(posterQrCodeImg, 38, 174,135,135);
					ctx.fillStyle = "#f4ce8d"; //字体颜色
					ctx.font = '16px "my-font-bangbang"'; //字体大小和字体样式
					ctx.fillText('要显示的文字', 16,322) // (x, y)为文字显示位置
						// draw方法 把以上内容画到 canvas 中
					  ctx.draw(false, (ret) => {
						  console.log(ret);
							  // 保存canvas为图片
							  uni.canvasToTempFilePath({
								x: 0,
								y: 0,
								width: 563,
								height: 1001,
								destWidth: 563,
								destHeight: 1001,
								canvasId: 'myCanvas',
								quality: 1,
								complete: function (res) {
								  console.log(res.tempFilePath);
								  data.value.imgURL=res.tempFilePath;
								  //生成图片后隐藏标签 有时候会生成失败，或者弹窗显示图片后图片马上消失 多调试几次 代码没有问题的 研究一下是哪步需要小修改
								  data.value.showcanvas = false
								}
							  });
					   
					  });
					}
				})
	        },
	        fail: err => {
	            console.log(err);
	        }
	    }, 
	    // this // 组件内使用必传当前实例
	);
	}, 300);
}
const show = ()  => {
	if (!token) {
		uni.navigateTo({
			url:"/pages/login/login"
		})
	}else {
		APPsetImage()
	popup.value.open('center')
	}
	
}
const copy = ()  => {
	uni.setClipboardData({
		data:userInfo.info.inviteCode,
		success:() => {
			data.value.isShowPopup=true
		}
	})
}

const download = ()  => {
	popup.value.close('center')
	// #ifdef H5
	let a = document.createElement('a')
	a.download = ''
	a.href = data.value.imgURL
	document.body.appendChild(a)
	a.click()
	a.remove()
	
	// #endif
	// #ifdef APP
	uni.saveImageToPhotosAlbum({
		filePath:data.value.imgURL,
		success: () => {
			uni.showToast({
				title: '保存成功',
				duration:1000
			});
		},
		fail: () => {
			uni.showToast({
				title: '保存失败',
				icon:"error",
				duration:2000
			});
		}
	})
	// #endif
	
}
const cacel = ()  => {
	popup.value.close('center')
}

</script>
<style scoped lang='scss'>
.invite{
	min-height: 100vh;
	display: flex;
	flex-flow: column;
	align-items: center;
	overflow-y: auto;
	background: url(../../static/invite/Bg_Basemap.png) ;
	background-size: 100% 100%;
	.topImgs{
		width: 153px;
		color: #fff;
	}
}
</style>