Skip to content

yanghanwen / wanda-vr

Go to a project
Commit 62f69288 by 杨翰文
Options

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

parent 628e46d4
Showing with 60 additions and 18 deletions
libs/html2canvas.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
show.html
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" /> <meta http-equiv="x-ua-compatible" content="IE=edge" />
<script src="./libs/helper.js"></script> <script src="./libs/helper.js"></script>
<script src="./libs/html2canvas.js"></script>
<script src="./libs/vue/vue.js"></script> <script src="./libs/vue/vue.js"></script>
<script src="./libs/axios.min.js"></script> <script src="./libs/axios.min.js"></script>
<style> <style>
...@@ -190,40 +191,61 @@ ...@@ -190,40 +191,61 @@
z-index: 1000; z-index: 1000;
width: 100%; width: 100%;
height: 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{ .modal-container{
position: relative;
} }
.poster{ .poster, .share-pic{
width: 6.51rem; width: 6.51rem;
height: 10.65rem;
position: relative; position: relative;
margin: 0.56rem auto 0.25rem; margin: 0rem auto 0rem;
position: relative; 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{ .poster-img{
width: 100%; width: 100%;
height: 100%; display: block;
} }
.change-poster-btn{ .change-poster-btn{
position: absolute; position: absolute;
right: 0.32rem; right: 0.32rem;
top: 0.3rem; top: 0.32rem;
width: 2.08rem; width: 2.08rem;
height: 0.67rem; height: 0.67rem;
background: #FFFFFF; background: rgba(255,255,255,.8);
font-size: 0.3rem; font-size: 0.3rem;
font-weight: 400; font-weight: 400;
color: #343434;; color: #343434;;
line-height: 0.66rem; line-height: 0.66rem;
border-radius: 0.33rem; border-radius: 0.33rem;
text-align: center; text-align: center;
z-index: 9; z-index: 101;
} }
.poster-action-box{ .poster-action-box{
width: 6.51rem; width: 6.51rem;
margin: 0 auto; margin: 0.4rem auto 0;
display: flex; display: flex;
justify-content:center; justify-content:center;
align-items: center; align-items: center;
...@@ -258,6 +280,7 @@ ...@@ -258,6 +280,7 @@
font-weight: bold; font-weight: bold;
color: #FFFFFF; color: #FFFFFF;
line-height: 0.8rem; line-height: 0.8rem;
text-shadow: 0 0 10px rgba(0,0,0,0.7);
} }
.poster-content__content{ .poster-content__content{
width: 4.12rem; width: 4.12rem;
...@@ -267,18 +290,19 @@ ...@@ -267,18 +290,19 @@
font-weight: bold; font-weight: bold;
color: #FFFFFF; color: #FFFFFF;
line-height: 0.42rem; line-height: 0.42rem;
text-shadow: 0 0 10px rgba(0,0,0,0.6);
} }
.poster-content__qrcode{ .poster-content__qrcode{
width: 1.07rem; width: 1.07rem;
height: 1.07rem; height: 1.07rem;
position: absolute; position: absolute;
left: 0.44rem; left: 0.4rem;
bottom: 0.36rem; bottom: 0.4rem;
} }
.poster-content__userinfo{ .poster-content__userinfo{
position: absolute; position: absolute;
right: 0.47rem; right: 0.47rem;
bottom: 0.32rem; bottom: 0.4rem;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -324,11 +348,13 @@ ...@@ -324,11 +348,13 @@
<div class="bottom" v-if="!showPoster" > <div class="bottom" v-if="!showPoster" >
<img @click="bindShareEvent" class="bottom__icon" src="./images/show/share.png" /> <img @click="bindShareEvent" class="bottom__icon" src="./images/show/share.png" />
</div> </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="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">
<div class="poster-content__title">{{userInfo.nickname}}的<br/>2020幸运打卡地：丹寨</div> <div class="poster-content__title">{{userInfo.nickname}}的<br/>2020幸运打卡地：丹寨</div>
<div class="poster-content__content">{{shareDesc}}</div> <div class="poster-content__content">{{shareDesc}}</div>
...@@ -339,6 +365,7 @@ ...@@ -339,6 +365,7 @@
</div> </div>
</div> </div>
</div> </div>
<img :src="postData" alt="" v-if="postData" class="share-pic">
<div class="poster-action-box"> <div class="poster-action-box">
<div @click.stop="previewImg" class="poster-action-btn">保存图片并发送给好友</div> <div @click.stop="previewImg" class="poster-action-btn">保存图片并发送给好友</div>
<!-- <div @click.stop="shareToFirends" class="poster-action-btn">分享好友</div>--> <!-- <div @click.stop="shareToFirends" class="poster-action-btn">分享好友</div>-->
...@@ -368,7 +395,8 @@ var vueInstance = new Vue({ ...@@ -368,7 +395,8 @@ var vueInstance = new Vue({
activeIdx:0, activeIdx:0,
posterUrl:'', posterUrl:'',
navs:[], navs:[],
userInfo:{} userInfo:{},
postData: ''
} }
}, },
methods:{ methods:{
...@@ -426,6 +454,18 @@ var vueInstance = new Vue({ ...@@ -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(){ closeModal(){
this.showPoster = false this.showPoster = false
this.posterUrl = '' this.posterUrl = ''
...@@ -498,7 +538,7 @@ var vueInstance = new Vue({ ...@@ -498,7 +538,7 @@ var vueInstance = new Vue({
return canvas.toDataURL("image/png"); return canvas.toDataURL("image/png");
}, },
async refreshShareText(){ async refreshShareText(only){
var randStr = this.contentList[parseInt(Math.random()*this.contentList.length)].content var randStr = this.contentList[parseInt(Math.random()*this.contentList.length)].content
console.log(randStr) console.log(randStr)
...@@ -508,6 +548,7 @@ var vueInstance = new Vue({ ...@@ -508,6 +548,7 @@ var vueInstance = new Vue({
// // this.posterUrl = currentInfo.poster // // this.posterUrl = currentInfo.poster
//this.showPoster = true //this.showPoster = true
// showModal() // showModal()
only!=='true' && this.generatePost();
}, },
async bindShareEvent(){ async bindShareEvent(){
...@@ -528,12 +569,13 @@ var vueInstance = new Vue({ ...@@ -528,12 +569,13 @@ var vueInstance = new Vue({
console.log(this.navs) console.log(this.navs)
this.contentList = await $get('/travel/desc').then(res=>res.data).catch(err=>{throw err}) 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') // var idx = getQueryByString(location.href,'idx')
// if(!isNaN(idx) && idx>=0){ // if(!isNaN(idx) && idx>=0){
// this.setActive(idx) // this.setActive(idx)
// } // }
var userInfo = await getUserInfo(); var userInfo = await getUserInfo();
userInfo.qrcode = (await createImgByAsync(userInfo.qrcode)).src
console.log(userInfo); console.log(userInfo);
this.$set(this,'userInfo',userInfo) this.$set(this,'userInfo',userInfo)
var largeShareName = `${userInfo.nickname}的` var largeShareName = `${userInfo.nickname}的`
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment