vue前端截图

<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>