fix: 分享图改成一上来就生成图的模式，增加阴影

show.html

@@ -8,6 +8,7 @@
 	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 	<meta http-equiv="x-ua-compatible" content="IE=edge" />
 	<script src="./libs/helper.js"></script>
+	<script src="./libs/html2canvas.js"></script>
 	<script src="./libs/vue/vue.js"></script>
 	<script src="./libs/axios.min.js"></script>
 	<style>
@@ -190,40 +191,61 @@
 			z-index: 1000;
 			width: 100%;
 			height: 100%;
+			transform: translate(-2000px, -2000px);
+			overflow: hidden;
+			box-sizing: border-box;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
 
+		.modal-wrap.show {
+			transform: translate(0px, 0px);
 		}
 		.modal-container{
-
+			position: relative;
 		}
-		.poster{
+		.poster, .share-pic{
 			width: 6.51rem;
-			height: 10.65rem;
 			position: relative;
-			margin: 0.56rem auto 0.25rem;
+			margin: 0rem auto 0rem;
 			position: relative;
 		}
+		.share-pic {
+			z-index: 100;
+			display: block;
+		}
+		.poster {
+			position: absolute;
+			top: 0;
+			left: 50%;
+			transform: translate(-50%, 0);
+		}
+		.poster.hide {
+			transform: translate(-2000px, -2000px);
+		}
 		.poster-img{
 			width: 100%;
-			height: 100%;
+			display: block;
 		}
 		.change-poster-btn{
 			position: absolute;
 			right: 0.32rem;
-			top: 0.3rem;
+			top: 0.32rem;
 			width: 2.08rem;
 			height: 0.67rem;
-			background: #FFFFFF;
+			background: rgba(255,255,255,.8);
 			font-size: 0.3rem;
 			font-weight: 400;
 			color: #343434;;
 			line-height: 0.66rem;
 			border-radius: 0.33rem;
 			text-align: center;
-			z-index: 9;
+			z-index: 101;
 		}
 		.poster-action-box{
 			width: 6.51rem;
-			margin: 0 auto;
+			margin: 0.4rem auto 0;
 			display: flex;
 			justify-content:center;
 			align-items: center;
@@ -258,6 +280,7 @@
 			font-weight: bold;
 			color: #FFFFFF;
 			line-height: 0.8rem;
+			text-shadow: 0 0 10px rgba(0,0,0,0.7);
 		}
 		.poster-content__content{
 			width: 4.12rem;
@@ -267,18 +290,19 @@
 			font-weight: bold;
 			color: #FFFFFF;
 			line-height: 0.42rem;
+			text-shadow: 0 0 10px rgba(0,0,0,0.6);
 		}
 		.poster-content__qrcode{
 			width: 1.07rem;
 			height: 1.07rem;
 			position: absolute;
-			left: 0.44rem;
-			bottom: 0.36rem;
+			left: 0.4rem;
+			bottom: 0.4rem;
 		}
 		.poster-content__userinfo{
 			position: absolute;
 			right: 0.47rem;
-			bottom: 0.32rem;
+			bottom: 0.4rem;
 			display: flex;
 			align-items: center;
 
@@ -324,11 +348,13 @@
 	<div class="bottom" v-if="!showPoster" >
 		<img @click="bindShareEvent" class="bottom__icon" src="./images/show/share.png" />
 	</div>
-	<div class="modal-wrap" v-if="showPoster" @click="closeModal">
+	<div class="modal-wrap" :class="{show: showPoster}" @click="closeModal">
+
 		<div class="modal-container">
-			<div class="poster">
-				<img :src="navs[activeIdx].share_image" class="poster-img" />
-				<div @click.stop="refreshShareText" class="change-poster-btn">换一换</div>
+
+			<div @click.stop="refreshShareText" class="change-poster-btn">换一换</div>
+			<div class="poster" ref="postContent" >
+				<img :src="navs[activeIdx].share_image" class="poster-img" @load="generatePost"/>
 				<div class="poster-content">
 					<div class="poster-content__title">{{userInfo.nickname}}的<br/>2020幸运打卡地：丹寨</div>
 					<div class="poster-content__content">{{shareDesc}}</div>
@@ -339,6 +365,7 @@
 					</div>
 				</div>
 			</div>
+			<img :src="postData" alt="" v-if="postData" class="share-pic">
 			<div class="poster-action-box">
 				<div @click.stop="previewImg" class="poster-action-btn">保存图片并发送给好友</div>
 <!--				<div @click.stop="shareToFirends" class="poster-action-btn">分享好友</div>-->
@@ -368,7 +395,8 @@ var vueInstance = new Vue({
 			activeIdx:0,
 			posterUrl:'',
 			navs:[],
-			userInfo:{}
+			userInfo:{},
+			postData: ''
 		}
 	},
 	methods:{
@@ -426,6 +454,18 @@ var vueInstance = new Vue({
 			//
 			// }
 		},
+		generatePost() {
+
+			setTimeout(() => {
+				html2canvas(this.$refs.postContent, {
+					allowTaint: true,
+					useCORS: true,
+					backgroundColor: null
+				}).then((canvas) => {
+						this.postData = canvas.toDataURL();
+				});
+			}, 200)
+		},
 		closeModal(){
 			this.showPoster = false
 			this.posterUrl = ''
@@ -498,7 +538,7 @@ var vueInstance = new Vue({
 			return canvas.toDataURL("image/png");
 
 		},
-		async refreshShareText(){
+		async refreshShareText(only){
 
 			var randStr = this.contentList[parseInt(Math.random()*this.contentList.length)].content
 			console.log(randStr)
@@ -508,6 +548,7 @@ var vueInstance = new Vue({
 			// // this.posterUrl = currentInfo.poster
 			//this.showPoster = true
 			// showModal()
+			only!=='true' && this.generatePost();
 		},
 		async bindShareEvent(){
 
@@ -528,12 +569,13 @@ var vueInstance = new Vue({
 			console.log(this.navs)
 			this.contentList = await $get('/travel/desc').then(res=>res.data).catch(err=>{throw err})
 
-			this.refreshShareText()
+			this.refreshShareText(true)
 			// var idx = getQueryByString(location.href,'idx')
 			// if(!isNaN(idx) && idx>=0){
 			// 	this.setActive(idx)
 			// }
 			var userInfo = await getUserInfo();
+			userInfo.qrcode = (await createImgByAsync(userInfo.qrcode)).src
 			console.log(userInfo);
 			this.$set(this,'userInfo',userInfo)
 			var largeShareName = `${userInfo.nickname}的`