vue3生成二维码海报

安装 html2canvas

<template>
	<div class="page">
	
		<!-- <div class="g-libbtns only" :class="{over:state.timeover}" v-show="state.star != 0" @click="state.showhbtype = true"> -->
		<div class="g-libbtns only" v-show="state.btnTpye == 1" @click="state.showhbtype = true">
			<div class="btn" @click="downloadCodeImg()">加速生成海报</div>
		</div>
		<!-- 生成海报 -->
		<div class="m-popup-poster-mzw-m1" v-show="state.showhbtype">
			<div class="black" @click="state.showhbtype = false"></div>
			<div class="box pic">
				<img :src="state.posterImgUrl" >
			</div>
		</div>
		<div class="m-popup-poster-mzw-m2" v-show="state.poster1">
			海报生成中...
		</div>
		<div class="m-popup-poster-m5">
			<div class="pic2 poster-aside">
				<img src="../assets/images/mzwpic/poster-mzw-m3.jpg" >
				<div class="pic">
					<qrcode-vue :value="state.ewmvalue" :size="state.size" level="H" />
				</div>
			</div>
		</div>
		
	</div>
</template>

<script setup>
import {authData} from '../server/index'
import {getMyGroup,getGroupData} from '../server/user'
import { reactive,onMounted,createApp } from 'vue'
import { useRouter  } from 'vue-router'
import QrcodeVue from 'qrcode.vue'
import html2canvas from "html2canvas"
// import pic from "src/assets/images/group/icon1.jpg"

const state = reactive({
	showhbtype:false,
	adminfo:[
		{
			nickname:'',
			head_img_url:'../assets/images/group/icon1.jpg',
		},{
			nickname:'',
			// head_img_url:requrie('@/assets/images/group/icon1.jpg'),
			head_img_url:'../assets/images/group/icon1.jpg',
		},{
			nickname:''	,
			head_img_url:'../assets/images/group/icon1.jpg',
		}
	],
	// 状态 拼团是0，开团是1
	star:0,
	btnTpye:0, // 0 显示2个按钮，1是生存海报
	// 结束弹框 true是现实弹框 false隐藏
	isover:false,
	//结束后不可点击按钮 true活动结束
	timeover:false,
	// 生成二维码
	ewmvalue:'',
	peoplenum:3,
	pid:'',
	pidq:'', // url获取
	posterImgUrl:'',
	
	token:'',
	user:'',
	poster1:false
})

const router = useRouter();

// 路由信息
const urlVal = router.currentRoute.value;
let pidq = urlVal.query.pid;

state.ewmvalue = 'https://dbpt.shyouhan.com/dp2204/poster/index.html?pid='+state.pid+'&stort=0'

// 生成海报图
function downloadCodeImg(){
	console.log('aaaa') 
	state.poster1 = true;
	const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;	//获取滚动轴滚动的长度
	var Mdom = document.querySelector('.poster-aside');
	const width = Mdom.offsetWidth;
	const height = Mdom.offsetHeight; //包裹容器的高度
	
	html2canvas(Mdom,{
		width:width,
		height:height,
		scrollY: -scrollTop,
		dpi: window.devicePixelRatio*2,
		// dpi: 350,
		scale:1,
		useCORS:true,
	}).then(canvas =>{
		let imgurl = canvas.toDataURL('image/png');
		state.posterImgUrl = imgurl;
		state.poster1 = false;
		state.showhbtype = true;
		// console.log(imgurl);
	})
	
}
</script>
<style  scoped>
	
	
	.g-hbpopup{
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -999;
		opacity: 0;
	}
	.g-hbpopup .black{
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.75);
	}
	.g-hbpopup .box{
		width: 85%; 
		/* width: 70%; */
		box-sizing: border-box;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		background-color: #fff;
		padding: .4rem 0;
	}
	.g-hbpopup .box .pics{
		padding: 0 .2rem;
		margin-bottom: .2rem;
	}
	.g-hbpopup .box .pic{
		width: 100%;
		/* height: 2.8rem; */
		height: 3.8rem;
		overflow: hidden;
		margin-bottom: .2rem;
	}
	.g-hbpopup .box .pic img{
		width: 100%;
		min-height: 100%;
	}
	.g-hbpopup .box .pics .tit{
		text-align: center;
		font-size: .3rem;
		/* font-size: .6rem; */
		font-weight: bold;
	}
	.g-hbpopup .box .txts{
		padding: .3rem .6rem;
		background-color: #e8e8e8;
		overflow: hidden;
	}
	.g-hbpopup .box .txts .ewm{
		float: right;
		/* width: 1.36rem;
		height: 1.36rem; */
		width: 2.36rem;
		height: 2.36rem;
		margin-left: .25rem;
	}
	.g-hbpopup .box .txts .ewm canvas{
		width: 100% !important;
		height: auto !important;
	}
	.g-hbpopup .box .txts .ewm img{
		width: 100%;
		height: 100%;
	}
	.g-hbpopup .box .txts .txt{
		overflow: hidden;
		font-size: .22rem;
	}
	.m-popup-poster-mzw-m1{
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 999;
	}
	.m-popup-poster-mzw-m1 .black{
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.75);
	}
	.m-popup-poster-mzw-m1 .box{
		/* width: 5.17rem;
		height: 6.25rem; */
		width: 85%;
		height: auto;
		box-sizing: border-box;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		background-color: #fff;
	}
	.m-popup-poster-mzw-m1 .pic img{
		width: 100%;
		height: 100%;
		display: block;
	}
	.m-popup-poster-mzw-m2{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9999;
		background-color: #000;
		color: #fff;
		text-align: center;
		line-height: 100vh;
		font-size: 0.3rem;
	}
	
	.m-popup-poster-m5{
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -999;
		opacity: 0;
		background-color: rgba(0,0,0,.75);
	}
	.m-popup-poster-m5 .pic2{
		/* width: 5.17rem;
		height: 6.25rem; */
		width: 10.34rem;
		height: 12.5rem;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.m-popup-poster-m5 .pic2 img{
		width: 100%;
		height: 100%;
		display: block;
	}
	.m-popup-poster-m5 .pic{
		/* width: 1.36rem;
		height: 1.36rem; */
		width: 2.72rem;
		height: 2.72rem;
		position: absolute;
		/* right: 0.42rem;
		bottom: 0.66rem; */
		right: 0.84rem;
		bottom: 1.32rem;
		overflow: hidden;
	}
	.m-popup-poster-m5 .pic canvas{
		width: 100% !important;
		height: auto !important;
	}
	.m-popup-poster-m5 .pic img{
		width: 100%;
		height: 100%;
	}
</style>