JianjianStreet-H5/pages/my/my-xiansuo.vue

<template>
	<view class="my-pages" @click="toImg" >
		<view class="top-box">
			<view class="head">
				<u--image shape="circle" :src="userInfo?userInfo.headImage:''" width="169rpx" height="169rpx"></u--image>
				<view style="padding: 56rpx; font-size: 45rpx; font-weight: bold;">{{userInfo?userInfo.nickName : '�����¼����'}}</view>
			</view>
		</view>
		<view class="contnet-box"  id="poster">
			<view class="cell-box" id="poster">
				<view class="cell-item flex justify-between align-center">
					<view class="flex align-center">
						<canvas canvas-id="qrcode" class="qrcode"/>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	
</template>

<script>
	import html2canvas from 'html2canvas'; 
	import uQRCode from '@/common/uqrcode.js'
	
	export default{
		data(){
			return{
				userInfo:null,
				role:0,
				cellList: [],
				base64: ''
			}
		},
		onShow() {
			this.getmyInfo()
		},
		onReady() {
			this.$com.displayNav()
		},
		methods:{
			getmyInfo(){
				this.$api('myInfo')
				.then(res=>{
					if(res.code == 200){
						this.role = res.result.role;
						this.userInfo = res.result;
						this.$store.commit('set_userInfo',res.result)
						this.qrFun('https://xinxiong.java996.icu/pages/my/login-kehu?vid=' + this.userInfo.id)
					}else{
						this.userInfo = null
					}
				})
			},
			toUrl(url,name){
				if(name==''){
					uni.navigateTo({
						url
					})
				}else{
					this.$Toast('')
				}
			},
			toLogin(){
				if(!this.userInfo){
					uni.navigateTo({
						url:"/pages/my/login-kehu"
					})
				}else{
					uni.navigateTo({
						url:'/pages/my/edit-user'
					})
				}
			},
			qrFun: function(text) {
				this.qrShow = true
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: text,
					size: 300,
					margin: 0,
					backgroundColor: '#FFFFFF',
					foregroundColor: '#000000',
					fileType: 'png',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {}
				})
			},
			saveHeadImgFile(base64) {
			    const bitmap = new plus.nativeObj.Bitmap("test");
			    bitmap.loadBase64Data(base64, function() {
			        const url = "_doc/" + new Date().getTime() + ".png";  // urlΪʱ���������ʽ
			        console.log('saveHeadImgFile', url)
			        bitmap.save(url, {
			            overwrite: true,  // �Ƿ񸲸�
			            // quality: 'quality'  // ͼƬ������
			        }, (i) => {
			            uni.saveImageToPhotosAlbum({
			                filePath: url,
			                success: function() {
			                    uni.showToast({
			                        title: 'ͼƬ����ɹ�',
			                        icon: 'none'
			                    })
			                    bitmap.clear()
			                }
			            });
			        }, (e) => {
			            uni.showToast({
			                title: 'ͼƬ����ʧ��',
			                icon: 'none'
			            })
			            bitmap.clear()
			        });
			    }, (e) => {
			        uni.showToast({
			            title: 'ͼƬ����ʧ��',
			            icon: 'none'
			        })
			        bitmap.clear()
			    });
			},
			toImg() {
				// ����ͼƬ�������⣬��̨����һ���ӿڣ���Ҫ������ͼƬ����ת��base64���Լ����ӿڣ����Ͳ�д�ˡ�
				let dom = document.querySelector('#poster'); // ��ȡdomԪ��
				html2canvas(dom, {
					width: dom.clientWidth, //dom ԭʼ���
					height: dom.clientHeight,
					scrollY: 0,// html2canvasĬ�ϻ�����ͼ�ڵ�ҳ�棬��Ҫ��scrollY��scrollX����Ϊ0
					scrollX: 0,
					useCORS: true,//֧�ֿ��򣬵�����ûʲô��
				}).then((canvas) => {
					this.base64 = canvas.toDataURL('image/png', 1);
					console.log(this.base64)
					
					this.saveHeadImgFile(this.base64);
					
					uni.showToast({
						icon: 'success',
						title: '�����',
					});
					
					// this.$http.post("/api/upload/image_by_base64", {
					// 	image: this.base64
					// }).then(res => {
					// 	if (res.status == 200) {
					// 		this.downImg = res.data.data;
					// 		uni.showToast({
					// 			icon: 'success',
					// 			mask: true,
					// 			title: '�����',
					// 		});
					// 	}
					// })
				});
			},
			

		}
	}
</script>

<style lang="scss" scoped>
	.qrcode {
		width: 600rpx;
		height: 600rpx; 
		margin: 50rpx auto;
	}
	.head {
		display: flex;
		justify-items: center; 
		height: 168rpx; 
		padding: 60rpx 20rpx 20rpx 40rpx;
		background-color: #00CCCC;
	}
	.my-pages {
		.top-box {
			height: 372rpx;
			background-color: #00CCCC;
			background-size: 100% 100%;
		}
		.contnet-box {
			height: 907rpx;
			background: #ffffff;
			border-radius: 79rpx 79rpx 0px 0px;
			box-shadow: 0px 3rpx 6rpx 0px rgba(0,0,0,0.16); 
			margin: -80rpx 26rpx 0;
			position: relative;
			
			.user-box {
				font-size: 32rpx;
				color: #000000;
				font-weight: 700;
				position: absolute;
				left: 50%;
				top: -100rpx;
				transform: translate(-50% , 0);
				
				.user-name {
					text-align: center;
					margin-top: 20rpx;
				}
				
			}
			
			.cell-box {
				padding: 20rpx 34rpx 34rpx;
				
			}
			
		}
	}
</style>