<template>
<div class="bigbox">
<div class="box" ref="imageTest">
<div class="boxTop">
13653197159 邀请您注册
<span style="color: #5FFFB7;">金猫矿池</span>
</div>
<div class="logo"><img src="../../../assets/img/logo1.png" alt="" /></div>
<div class="bbox">
<img src="../../../assets/img/logo2.png" alt="" />
<div class="bookcode" id="qrcode" ref="qrcode1"></div>
</div>
</div>
<div class="bbtn" @click="setCanvas">
<img src="../../../assets/img/bbtn.png" alt="" />
<div style="margin-left: 1vw;">保存海报到相册</div>
</div>
</div>
</template>
<script>
import QRCode from 'qrcodejs2';
import html2canvas from 'html2canvas';
export default {
components: {
QRCode
},
data() {
return {
userInfo: null
};
},
mounted() {
this.getUserInfo(), this.qrcodeScan();
},
methods: {
getUserInfo() {
this.userInfo = JSON.parse(localStorage.getItem('user'));
},
qrcodeScan() {
//生成二维码
let qrcode = new QRCode('qrcode', {
width: 57, //图像宽度
height: 57, //图像高度
colorDark: '#000000', //前景色
colorLight: '#ffffff', //背景色
typeNumber: 4,
correctLevel: QRCode.CorrectLevel.H
});
qrcode.clear(); //清除二维码
qrcode.makeCode(需要转成二维码的网址); //生成另一个新的二维码
},
setCanvas() {
const canvas = document.createElement('canvas');
// 获取要生成图片的 DOM 元素
let canvasDom = this.$refs.imageTest;
// 获取指定的宽高
const width = parseInt(window.getComputedStyle(canvasDom).width);
const height = parseInt(window.getComputedStyle(canvasDom).height);
// 宽高扩大 3 倍 处理图片模糊(根据自己的图片大小来进行调整)
canvas.width = width * 3;
canvas.height = height * 3;
canvas.style.width = width /2 + 'px';
canvas.style.height = height /2 + 'px';
const context = canvas.getContext('2d');
context.scale(1, 1);
const options = {
backgroundColor: null,
canvas: canvas,
useCORS: true
};
html2canvas(canvasDom, options).then(canvas => {
//此时的图片是base64格式的,我们将图片格式转换一下
let type = 'png';
let imgData = canvas.toDataURL(type);
// 照片格式处理
let _fixType = function(type) {
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
let r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
};
imgData = imgData.replace(_fixType(type), 'image/octet-stream');
let filename = 'UUSound' + '.' + type;
this.saveFile(imgData, filename);
});
},
saveFile(data, filename) {
var save_link = document.createElement("a"); // 生成一个a元素
var event = new MouseEvent("click"); // 创建一个单击事件
save_link.href = data;
save_link.download = filename;
save_link.dispatchEvent(event); // 触发a的单击事件
},
}
};
</script>
<style lang="less" scoped>
.bigbox {
width: 100%;
height: 100%;
.box {
position: relative;
width: 100%;
height: 100%;
background: url(../../../assets/img/bg1.png) no-repeat;
background-size: 100%;
.boxTop {
position: absolute;
left: 50%;
top: 8vh;
margin-left: -40%;
width: 80%;
height: 31px;
text-align: center;
line-height: 31px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.29);
color: #fff;
font-size: 15px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
}
.logo {
position: absolute;
left: 50%;
top: 60%;
margin-left: -123.5px;
width: 247px;
height: 77px;
img {
width: 100%;
}
}
.bbox {
position: absolute;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 11.3vh;
background-color: #fff;
padding: 0 5vw;
box-sizing: border-box;
img {
-webkit-logical-width: 127px;
}
}
}
.bbtn {
position: fixed;
bottom: 19vh;
left: 50%;
margin-left: -87px;
display: flex;
align-items: center;
justify-content: center;
width: 174px;
height: 38px;
border-radius: 19px;
border: 1px solid #333b44;
color: #fff;
font-size: 15px;
padding-left: 3vw;
box-sizing: border-box;
img {
width: 15px;
height: 16px;
}
}
.cv-img{
width: 100%;
height: 80vh;
}
}
</style>