fourPayProject/51uni/MyPages/my/share.vue

<template>
	<view class="content">
		<u-overlay :show="overlayShow"></u-overlay>
		<view class="container">
			<headers :titles="titles"><uni-icons type="arrow-left" color="#fff" size="22px"></uni-icons></headers>
			<view class="img-back" id="canvasImg">
				<image :src="base64" mode=""></image>
				<view class="dingwei">
					<view class="rwm-box">
						<uqrcode style="margin-bottom:60px;" ref="uqrcode" canvas-id="myCanvas" :value="info"
							:size="150">
						</uqrcode>
					</view>
				</view>
			</view>
			<view class="anniu" @click="canvas.downImg">保存</view>
		</view>

	</view>
</template>

<script module="canvas" lang="renderjs">
	import html2canvas from 'html2canvas';
	export default {
		data() {
			return {

			}
		},
		methods: {
			downImg(e, ownerVm) {
				ownerVm.callMethod('showToast1', `请到相册查看`)
				window.scrollTo(0, 0) //注意这里必须设置为顶部不然会出现图片不全
				html2canvas(document.getElementById('canvasImg'), {
					allowTaint: true, //是否允许跨域图像渲染画布
					useCORS: true, //是否尝试使用 CORS 从服务器加载图像 解决图片跨域问题
				}).then(function(canvas) {
					ownerVm.callMethod('receive', canvas.toDataURL('image/png', 1.0))
				}).catch(err => {
					ownerVm.callMethod('showToast', `生成图片失败，请重试,${err}`)
				})
			},
		}
	}
</script>
<script>
	import {
		base64ToPath,
		pathToBase64
	} from 'image-tools'
	import headers from '../../components/header/headers.vue'
	import tabbar from '../../components/tabbar/tabbar.vue'


	export default {
		data() {
			return {
				titles: "分享",
				overlayShow: false,
				show: false,
				status: 'loading',
				info: '',
				base64: ""
			}
		},
		onLoad(option) {
			this.info = option.info
			pathToBase64('/static/imgs/shareNew.png').then(data => {
				console.log(data);
				this.base64 = data;
			})


		},
		onPullDownRefresh() {
			console.log("刷新");
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			// this.show = true
			setTimeout(() => {
				console.log("加载执行");
			}, 2000)
		},
		components: {
			headers,
			tabbar
		},
		methods: {
			showToast1(content) {
				setTimeout(function() {
					uni.showToast({
						title: content,
						icon: 'none',
						duration: 1000,
					});
				}, 1000);

			},
			//提示
			showToast(content) {
				uni.showToast({
					title: content,
					icon: 'none',
					duration: 2000,
				});
			},

			// 将base64位的图片路径转换为临时路径
			receive(val) {
				//去除base64位中的空格
				this.imgUrl = val.replace(/[\r\n]/g, '');
				//将base64位的图片路径转换为临时路径
				setTimeout(() => {
					const url = this.imgUrl;
					base64ToPath(url).then(path => {
							this.saveImage(path)
						})
						.catch(error => {
							console.error('图片的临时路径转换出错了：', error);
						});
				}, 500);
				uni.hideLoading()
			},
			// 保存图片到手机相册
			saveImage(path) {
				uni.saveImageToPhotosAlbum({
					filePath: path,
					success: () => {},
					fail: () => {
						this.showToast('保存图片到本地相册失败')
					}
				});
			},


			getuqrcode() {
				this.$refs.uqrcode.save({
					success: () => {
						uni.showToast({
							icon: 'success',
							title: '保存成功'
						});
					}
				});
			},

			goback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {}

	.container {
		width: 100%;

		box-sizing: border-box;
		padding-top: 88px;
	}

	.img-back {
		// width: 100%;
		// height: 100vh;

		background: #e44f0a;
		position: relative;
		width: 100%;
		height: 90vh;
		margin: 0px;
		box-sizing: border-box;
		padding: 1px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.c-box {
		width: 200px;

		border-radius: 50px;
		height: 40px;
		background: #e44f0a;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	.top-img {
		width: 95%;
		margin: 15px auto;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 10px;
		text-align: center;
		background: #fff;
	}

	.dw {
		position: absolute;
		left: 50%;
		transform: translate(-50%, 280%);
	}

	.anniu {

		width: 250px;
		border-radius: 50px;
		background: #ff9e1b;
		height: 40px;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 50%;
		transform: translate(-50%, -150%);


	}

	.dingwei {
		position: absolute;
		left: 50%;
		transform: translate(-50%, -115%);
		margin: 0 auto;
	}

	.rwm-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

	}
</style>