mz/pages/shareQrCode/index.vue

<template>
	<view class="container" @click="handleDownloadQrIMg()">
		<img v-if="posterDataUrl" :src="posterDataUrl" class="poster-bg" width="100%" height="auto"/>
		<view v-else class="item-box"  id="poster" >
			<img class="poster-bg" src="../../static/img/img38.jpg"/>
<!-- 			<canvas 
			:style="{ left: `${(canWeidth - 134) / 2}px`}"
			class="qr" canvas-id="qrCode-canvas" id="qrCode-canvas"></canvas> -->
			<canvas
			:style="{ left: `${(canWeidth - 134) / 2}px`}"
			class="qr" canvas-id="qrCode-canvas" id="qrCode-canvas"></canvas>
		</view>
	</view>
</template>
<script>
import { mapState } from 'vuex';
import html2canvas from 'html2canvas'
import QRCode from 'qrcode'
import { shareLoad } from '@/utils/wxAuthorized';
export default {
	data() {
		return {
			url: '',
			src:'',
			posterDataUrl:'',
			poster: '',// 合成图片
			canHeight: 0,
			canWeidth: 0,
			size: 180,
			ratio: 1, //页面比例用于计算
		};
	},
	onLoad() {
		this.loadData();
		this.shareDate()
		this.$nextTick(() => {
		const query = uni.createSelectorQuery().in(this);
			query.select('.container').boundingClientRect(data => {
			this.ratio = data.width / 750;
			}).exec();
			// 获取画布宽高信息
			query.select('#qrCode-canvas').fields(
				{size: true},e => {
					console.log('获取画布宽高信息',e)
					this.canHeight = e.height;
					this.canWeidth = e.width;
					// this.ratio
				}).exec();
		});
	},
	computed: {
		...mapState(['userInfo']),
		
	},
	methods: {
		// 请求载入数据
		async loadData() {
			let obj = this;
			obj.url = 'http://doctortest.igxys.com/index/#/pages/index/home' + '?spread=' + obj.userInfo.uid;
			obj.createQRCode();
			// obj.shareDate()
		},
		shareDate() {
			let obj = this;
			let url = 'http://doctortest.igxys.com/index/#/pages/index/home?spread=' + obj.userInfo.uid;
			let bool = uni.getStorageSync('weichatBrowser') || '';
			let data = {
				link: url, // 分享链接
				imgUrl: obj.userInfo.avatar, // 分享图标
				desc:obj.userInfo.nickname,
				title: obj.userInfo.nickname+'邀请您进入共享预约平台',
				success: function() {},
			};
			console.log(data,'datadatadata')
			console.log(shareLoad);
			shareLoad(data);
		},
		createQRCode () {
			let obj = this;
			//先用 QRCode 生成二维码 canvas，然后用 html2canvas 合成整张海报并转成 base64 显示出来
		this.$nextTick(() => {
		     setTimeout(function(){
				let canvas = document.getElementById('qrCode-canvas').children[0];
				// console.log(canvas,'canvas')
				// console.log(obj.url)
				QRCode.toCanvas(canvas,obj.url,(error) => {
					if (error) {
						console.log(error,'error')
					} else {
						//qrcode 生成的二维码会带有一些默认样式，需要调整下
						canvas.style.width = '140px'
						canvas.style.height = '140px'
						canvas.style.padding = '0px'
						let poster = document.getElementById('poster')
						html2canvas(poster).then(canvas => {
						 // console.log(canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"))
						 obj.posterDataUrl = canvas.toDataURL();
						});
					}
				})
			},500);
    	});
		},
		handleDownloadQrIMg() {
			  console.log('sssbb')
			const imgUrl = this.posterDataUrl
			// 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候），那么调用该方法去下载图片
			if (window.navigator.msSaveOrOpenBlob) {
			var bstr = atob(imgUrl.split(',')[1])
			var n = bstr.length
			var u8arr = new Uint8Array(n)
			while (n--) {
			u8arr[n] = bstr.charCodeAt(n)
			}
			var blob = new Blob([u8arr])
			window.navigator.msSaveOrOpenBlob(blob, '分享二维码' + '.' + 'png')
			} else {
			// 这里就按照chrome等新版浏览器来处理
			const a = document.createElement('a')
			a.href = imgUrl
			a.setAttribute('download', '分享二维码')
			a.click()
			}
		},
	},
};
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.container{
		width: 100%;
		height: 1400rpx;
		.item-box{
			width: 100%;
			height: 100%;
			margin: 0rpx auto;
			background-size: 100% 100%;
			.poster-bg{
				position: relative;
				height: 100%;
				width: 100%;
				margin: 0rpx auto;
				}
				.qr{
					width: 100%;
					height: 100%;
					position: absolute;
					top:9.6rem;
					// right: 0;
					// bottom: 0;
					// top:9.6rem;
					// left:6.5rem;
				}
		}
	}
</style>