<template>
<el-container>
<el-main v-loading="loading" element-loading-text="二维码制作中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
<div class="sqcode-icon">
<i class="el-icon-arrow-left" @click="ticketBack"></i>
</div>
<div id="posterHtml" :style="{backgroundImage: 'url('+posterHtmlBg+')'}" v-show="Sqshow">
<vue-qr ref="qr" :logoSrc="imageUrl" :text="text" :size="170" :margin='10'></vue-qr>
</div>
<div class="sqcode-img" v-show="!Sqshow">
<img :src="posterImg">
</div>
</el-main>
</el-container>
</template>
<script>
import vueQr from 'vue-qr';
import html2canvas from "html2canvas";
import HeadeRord from '@/assembly/HeadeRord';
export default {
data () {
return {
imageUrl: require("../../assets/images/loho.jpg"),
posterHtmlBg:require('../../assets/images/qrimage.jpg'),
posterImg: '', // 最终生成的海报图片
Sqshow:true,
loading:true,
text:'http://xxxxx.com/#/?buid='+this.$route.params.uid,
};
},
components:{
HeadeRord,
vueQr
},
created(){
this.createPoster()
},
methods: {
ticketBack(){
this.$router.go(-1)
},
// 生成海报
createPoster() {
const that = this;
setTimeout(()=>{
const domObj = document.getElementById('posterHtml')
html2canvas(domObj, {
useCORS: true,
allowTaint: false,
logging: false,
letterRendering: true,
onclone(doc) {
let e = doc.querySelector('#posterHtml')
e.style.display = 'block'
}
}).then(function(canvas) {
// 在微信里,可长按保存或转发
that.posterImg = canvas.toDataURL('image/png');
that.Sqshow=false;
that.loading=false;
// console.log(that.posterImg)
// that.downs(that.posterImg)
})
},4000)
},
// 下载照片
downs(img){
let link = document.createElement('a')
link.href = img
link.download = 'qrCode.png'
link.click();
},
}
}
</script>
<style scoped>
.el-main{
margin: 0 0;
}
.sqcode-icon{
position: fixed;
top: 1.5%;
left: 4%;
z-index: 9999;
width: 1rem;
height: 1rem;
background-color: #000000;
opacity: 0.8;
border-radius: 1rem;
color: #FFFFFF;
line-height: 1rem;
text-align: center;
font-size: 0.5rem;
}
#posterHtml{
height: 100vh;
background-size: 100% 100%;
position: relative;
}
#posterHtml img{
position: absolute;
top: 68%;
left: 28%;
width: 4.5rem;
height: 4.5rem;
}
.sqcode-img{
width: 100%;
height: 100vh;
}
.sqcode-img img{
width: 100%;
height: 100%;
}
</style>
