<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) {
? ? ? ? ? ? // 在微信里,可長按保存或轉發(fā)
? ? ? ? ? ? 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>
