zhgdyunapp/pages/videoManage/component/canversCom.vue

<template>
	<view>
		<canvas canvas-id="myCanvas" :style="`width:${imgList.imgWidth}px;height:${imgList.imgHeight}px;`"
			style="position: fixed;top:0px;left: 0rpx;"></canvas>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: '',
				date:'',//现在时间
			}
		},
		props: ['imgList'],
		watch: {

		},
		mounted() {
			console.log("啦啦啦啦啦", this.imgList)
			let that = this;
				setInterval(function() {
				that.date = Date.parse(new Date());
				}, 1000);
			this.date = this.dateFormat(new Date().toISOString())
			this.getPosition();
			this.canversImg()
		},
		methods: {
			canversImg() {
				let that = this
				console.log('我开始画啦')
				const ctx = uni.createCanvasContext('myCanvas', that); //获取一个画布对象
				ctx.drawImage(that.imgList.imgUrl, 0, 0, that.imgList.imgWidth, that.imgList
					.imgHeight); //画一个图片底图（路径，位置，大小）
				ctx.drawImage(require('@/static/CanvarsImg.png'), that.imgList.imgWidth * 0.52, that.imgList.imgHeight *
					0.72, that.imgList.imgWidth * 0.46, that.imgList.imgHeight * 0.22); //画一个图片底图（路径，位置，大小）
				ctx.setFillStyle('#FFFFFF'); // 文字颜色
				ctx.setFontSize(25); // 文字字号
				ctx.fillText('详情', that.imgList.imgWidth * 0.73, that.imgList.imgHeight * 0.755); // 绘制文字
				ctx.setFillStyle('#000000'); // 文字颜色
				ctx.fillText('负责人：' + (that.imgList.name ? that.imgList.name : '暂无'), that.imgList.imgWidth * 0.56, that.imgList.imgHeight * 0.8); // 绘制文字
				ctx.fillText('班   组：' + (that.imgList.team ? that.imgList.team : '暂无'), that.imgList.imgWidth * 0.56, that.imgList.imgHeight * 0.825); // 绘制文字
				ctx.fillText('天   气：'+'晴', that.imgList.imgWidth * 0.56, that.imgList.imgHeight * 0.85); // 绘制文字
				ctx.fillText('拍摄时间：'+that.date, that.imgList.imgWidth * 0.56, that.imgList.imgHeight * 0.875); // 绘制文字
				ctx.fillText('地   点：'+'福永意库9栋201', that.imgList.imgWidth * 0.56, that.imgList.imgHeight * 0.9); // 绘制文字
				ctx.draw(false, () => {
					// canvas画布转成图片并返回图片地址
					uni.canvasToTempFilePath({
						canvasId: 'myCanvas',
						width: that.imgList.imgWidth,
						height: that.imgList.imgHeight,
						destWidth: that.imgList.imgWidth,
						destHeight: that.imgList.imgHeight,
						fileType:'png',
						success: res => {
							console.log(res.tempFilePath,'res.tempFilePath')
							that.imgUrl = res.tempFilePath;
							that.showShareImg = true;
							uni.showToast({
								title: '绘制成功'
							});
							that.$emit('imgUrl', that.imgUrl)
						},
						fail: err => {
							uni.showToast({
								title: '绘制失败'
							});
						},
						complete: () => {
							uni.hideLoading();
							uni.hideToast();
						}
					}, );
				});
			},
			getPosition() {
				console.log("正在获取当前位置啦")
				const that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(lb) {
						console.log("位置信息", lb);
						console.log('当前位置的经度：' + lb.longitude);
						console.log('当前位置的纬度：' + lb.latitude);
						// that.latitude = lb.latitude;
						// that.longitude = lb.longitude;
						// console.log(lb.longitude, lb.latitude);

						let key = '56c91fb2683e5bf0f46014ac200d4c1b'; //高德地图key
						uni.request({
							// 高德
							url: 'https://restapi.amap.com/v3/geocode/regeo?output=json&location=' +
								lb.longitude + ',' + lb.latitude + '&key=' + key +
								'&radius=1000&extensions=all',
							data: {},
							header: {
								'Content-Type': 'application/json',
								'Access-Control-Allow-Origin': '*'
							},
							success: function(res) {
								console.log('高德地图API接口返回信息', res)
							},
						})
					},
				})
			},
			dateFormat(time) {
				    let date = new Date(time);
				    let year = date.getFullYear();
				    // 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				    let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				    let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				    let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				    let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				    let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				    // 拼接
				    return year + "年" + month + "月" + day + "日" + hours + ":" + minutes + ":" + seconds;
				    // return year + "-" + month + "-" + day;
				},
		}
	}
</script>

<style>
</style>