epidemic-h5/static/img/share.vue

<template>
	<view class="bt-tip">
		<view class="down" @click="drewImage">
			<view class="" >
				保存图片
			</view>
		</view>

		<view id="shareImage" >
			<view class="border" :style="{'min-height':Height+'px'}">
				<view class="content">
					<view class="title_1" >
						<text>{{list.setCity}}</text>>>><text>{{list.reachCity}}</text>
					</view>
					<view class="title_2">
						{{list.title}}
					</view>
					<view class="text_1">
						<parse :content="list.body"></parse>
						<!-- 对于在湖北入境的人员，实施“14+14”的健康管理措施。即14天集中隔离医学观察，期间进行2次核酸检测和1次抗体检测;集中隔离医学观察期满后再实施14天居家医学观察，期间进行两次核酸检测。入境人员隔离点应在隔离对象隔离期满前3天，将隔离人员相关信息通知其地新冠肺炎疫情防控指挥部，以便当地落实居家医学观察。
	
				天居家医学观察，期间进行两次核酸检测。入境人员隔离点应在隔离对象隔离期满前3天，将隔离人员相关信息通知其地新冠肺炎疫情防控指挥部，以便当地落实居家医学观察。 -->
					</view>
					<view class="tip_share">
						<view class="left_share">
							<image src="../../images/erwei.jpg" mode=""></image>
						</view>
						<view class="right_share">
							<view class="">
								数据来源(可点击,数据来源列表)
							</view>
							<view class="">
								<text>xxxx</text>城市疫情防控指挥中心
							</view>
						</view>
					</view>
				</view>
				<image class="btimg" src="../../images/btimg.png" mode=""></image>
				<image src="../../images/icon6.png" mode="" class="icon"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import html2canvas from '@/static/html/js/html2canvas.js';
	import parse from '../../uParse-master/src/wxParse.vue'
	export default {
		data() {
			return {
				list: "",
				Height:""
			}
		},
		onLoad(options) {
			this.list = JSON.parse(options.list)
			console.log(this.list, 'pppp')
			uni.getSystemInfo({
				success: (res) => {
					this.Height=res.windowHeight
				}
			})
		},
		components: {
			parse
		},
		methods: {
			drewImage() {
				html2canvas(document.querySelector('#shareImage'), {
					useCORS: true,
				}).then(canvas => {
					let previewFile = canvas.toDataURL('image/png');
					this.download(previewFile)
				});
			},
			download(url) {
				var oA = document.createElement("a");
				oA.download = ''; // 设置下载的文件名，默认是'下载'
				oA.href = url;
				document.body.appendChild(oA);
				oA.click();
				oA.remove(); // 下载之后把创建的元素删除
			},
		}
	}
</script>

<style>
	page {
		height: 100%;

	}

	#size {
		margin: 30px;
		background-color: #00BFFF;
	}

	.border {
		/* 	width: 100%; */
		position: relative;
		/* min-height:100vh; */
		padding: 0 15px;
		padding-top: 50px;
		padding-bottom: 40px;
		/* 	height: 600px; */
		background: linear-gradient(180deg, #1E37EB 0%, #0FC6A1 100%);
	}
.down{
	position: fixed;
	bottom :0;
	height: 100upx;
	line-height: 100upx;
	width: 100vh;
	text-align: center;
	z-index: 9999999999999;
}
	
.down view{
	width: 20%;
	text-align: center;
	font-size: 30upx;
	height: 80upx;
	line-height: 80upx;
	margin-left: 15%;
	color: #FFFFFF;
	border-radius: 12upx;
	background-color: rgba(255,255,255,0.3);
}
	.content {
		padding: 45px 17px;
		background-color: #FFFFFF;
		border-radius: 12px;
		margin-bottom: 170px;
	}

	.btimg {
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.icon {
		position: absolute;
		top: 23px;
		right: 15px;
		height: 80px;
		width: 80px;
	}

	.title_1 {
		text-align: center;
		font-size: 26px;
		font-weight: bold;
		line-height: 88px;
		color: #23459D;
		opacity: 1;
	}

	.title_2 {
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		line-height: 34px;
		color: #333333;
		opacity: 1;
		margin-top: 10px;
		margin-bottom: 20px;
	}

	.text_1 {
		font-size: 14px;
		font-weight: 400;
		line-height: 21px;
		color: #333333;
		opacity: 1;
	}

	.tip_share {
		display: flex;
		margin-top: 32px;
	}

	.left_share {
		flex: 1;
	}

	.left_share image {
		height: 60px;
		width: 60px;
		margin-left: 30px;
		/* right: 17px; */
	}

	.right_share {
		text-align: right;
		margin-top: 8px;
		font-size: 14px;
		font-weight: 400;
		line-height: 21px;
		color: #333333;
		opacity: 1;
	}
</style>

<!-- <template>
	<view class="border">
			<canvas style='width:100%; height:700px;'  canvas-id="firstCanvas" id="firstCanvas"></canvas>
	</view>
</template>

<script>
	export default {

		data() {
			return{
              wHwidth:'',
              wHheight:''
			}
		},
		onReady: function(e) {
		uni.getSystemInfo({
		    success: function (res) {
		        console.log(res.model);
		        console.log(res.pixelRatio);
		        console.log(res.windowWidth);
		        console.log(res.windowHeight);
				this.wHwidth=res.windowWidth
				this.wHheight=res.windowHeight
		        console.log(res.language);
		        console.log(res.version);
		        console.log(res.platform);
		    }
		});
			
	
			
			// context.fillText('郑州郑州回安阳过年需要隔离吗郑州回安阳过年需要隔离吗郑州回安阳过年需要隔离吗郑州回安阳过年需要隔离吗安阳', 50, 150)
			var str =
				"郑州郑州回安阳过年需要隔离吗郑州回安阳过年需要隔离吗郑州回安阳过年需要隔离吗郑州回安阳过年需要隔离吗安阳郑州郑州回安阳过年需要隔离吗郑州回安阳过年需要隔离吗郑州回安阳过年需要隔离吗郑州回安阳过年需要隔离吗安阳";
			// this.fenGeString(str, 25);
			let meber= str.length / 10
			let he=meber*20
			console.log(he,'he')
			var flag = 10;
			var arr = [];
			var count = 0;
			var context = uni.createCanvasContext('firstCanvas')
			context.setStrokeStyle("#00ff00")
			context.setLineWidth(2)
			context.rect(10, 10, 320, 700)
			context.stroke()
			context.drawImage('../../static/img/bg.png', 0,0 , this.wHwidth, he)
			context.drawImage('../../static/img/btimg.png', 0, 530, this.wHwidth, he) //底部图片
			context.beginPath()
			context.rect(40, 50, 300,he+150)
			context.setFillStyle('#FFFFFF')
			context.fill()
			
			context.setFontSize(28)
			context.setFillStyle('#23459D')
			// context.fillText('郑州>>安阳', 115, 100)
			context.fillText('郑州>>安阳', uni.upx2px(350) - context.measureText('郑州>>安阳').width / 2, 100)
			context.setFontSize(18)
			context.setFillStyle('#000000')
			context.fillText('郑州回安阳过年需要隔离吗', uni.upx2px(350) - context.measureText('郑州回安阳过年需要隔离吗').width / 2, 130)
			context.setFontSize(14)
			for (var i = 0, len = str.length / 10; i < len; i++) {
				 var str1 = str.substr(0, 20);
				str = str.replace(str1, '');
				console.log(str1,'ppp')
				let height=i*25 + 170
				context.fillText(str1, 50, height)
				// return;
			}
			
			context.drawImage('../../static/img/erwei.jpg', 60, he+100, 70, 80)
			context.draw()
		},

		methods: {
			
		}

		// import html2convas from "../../static/html2canvas.js"
		// export default{
		// 	data(){
		// 		return{

		// 		}

		// 	},
		// 	onShow(){
		// 		console.log('ewewewe')
		// 		let dom = document.querySelector('shareImage');
		// 		 new html2canvas(dom).then(canvas => {
		// 		    // canvas为转换后的Canvas对象
		// 		    let oImg = new Image();
		// 		    oImg.src = canvas.toDataURL();  // 导出图片
		// 		    document.body.appendChild(oImg);  // 将生成的图片添加到body
		// 			console.log('ewewewe')
		// 		  });
		// 	}
		// }
	}
</script>

<style>
	/* 	page {
		height: 100vh;
	}

	.body {
		position: relative;
		padding: 0 30upx;
		padding-top: 100upx;
		padding-bottom: 80upx;
		background: linear-gradient(180deg, #1E37EB 0%, #0FC6A1 100%);
	}

	.content {
		padding: 90upx 34upx;
		background-color: #FFFFFF;
		border-radius: 24upx;
		margin-bottom: 300upx;
	}

	.btimg {
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.icon {
		position: absolute;
		top: 46upx;
		right: 30upx;
		height: 160upx;
		width: 160upx;
	}

	.title_1 {
		text-align: center;
		font-size: 52upx;
		font-weight: bold;
		line-height: 88upx;
		color: #23459D;
		opacity: 1;
	}

	.title_2 {
		text-align: center;
		font-size: 40upx;
		font-weight: bold;
		line-height: 68upx;
		color: #333333;
		opacity: 1;
		margin-top: 20upx;
		margin-bottom: 40upx;
	}

	.text_1 {
		font-size: 28upx;
		font-weight: 400;
		line-height: 42upx;
		color: #333333;
		opacity: 1;
	}

	.tip_share {
		display: flex;
		margin-top: 64upx;
	}

	.left_share {
		flex: 1;
	}

	.left_share image {
		height: 120upx;
		width: 120upx;
		margin-left: 106upx;
		right: 34upx;
	}

	.right_share {
		text-align: right;
		margin-top: 15upx;
		font-size: 28upx;
		font-weight: 400;
		line-height: 42upx;
		color: #333333;
		opacity: 1;
	} */
</style>
 -->