uniapp+uView 实现拍照水印定位信息

1、先上效果图：

                 

代码目录结构截图：

 2、照片列表页代码

<template>
	<view class="u-upload">
		<view class="u-list-item u-preview-wrap" v-for="(item, index) in imgList" :key="index"
		:style="{
			width: 200,
			height: 200
		}">
		
			<view class="u-delete-icon" @click="deleteItem(index)" :style="{
					background: '#fa3534'
				}">
				<u-icon class="u-icon" name="close" size="20" color="#ffffff"></u-icon>
			</view>
			<image @click="lookImg(index)" class="u-preview-image"
							:src="item.path"></image>
			
		</view>
		<view style="display: inline-block;" @click="gotoCamera" v-if="imgList.length<8">
			<slot name="addBtn"></slot>
			<view class="u-list-item u-add-wrap" hover-class="u-add-wrap__hover" hover-stay-time="150"
				:style="{
					width: 200,
					height: 200
				}">
				<u-icon name="camera" size="80"></u-icon>
			</view>
		</view>
	</view>	
</template>

<script>
	export default {
		data() {
			return {
				imgList:[],
			}
		},
		methods: {
			// 跳转到拍照页面
			gotoCamera(){
				uni.$u.route('/pages/camera/camera');
			},
			// 删除图片
			deleteItem(index){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '您确定要删除此张照片吗？',
					success: async (res) => {
						if (res.confirm) {
							that.imgList.splice(index,1)
						}
					}
				});
			},
			lookImg(index){
				let photoList = this.imgList.map(item => {
					return item.path;
				});
				// 预览图片
				uni.previewImage({
					current: index,
					urls: photoList,
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.u-upload {
		// @include vue-flex;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.u-add-tips {
		margin-top: 20rpx;
		line-height: 40rpx;
	}
	.u-delete-icon {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		z-index: 10;
		background-color: red;
		border-radius: 100rpx;
		width: 44rpx;
		height: 44rpx;
		// @include vue-flex;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	 
	.u-icon {
		// @include vue-flex;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.u-list-item {
		width: 200rpx;
		height: 200rpx;
		overflow: hidden;
		margin: 10rpx;
		background: rgb(244, 245, 246);
		position: relative;
		border-radius: 10rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
	}
		 
	.u-preview-wrap {
		border: 1px solid rgb(235, 236, 238);
	}
	.u-preview-image {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
</style>

3、拍照页面代码

        注意两点：

        1、代码中的 key: "xxxxx-xxxxx-xxxxx-xxxxx-xxxxx"   换成自己的，这里的key是申请腾讯位置服务获取的秘钥，如何申请请参考这篇博客 ：https://www.cnblogs.com/1549983239yifeng/p/14750266.html

        2、如果要获取定位信息，需要在Hbuilder中勾选位置接口，如下图

<template>
	<view>
		<camera :device-position="device" :flash="flash" @error="error" :style="{ width: '100%',position: 'relative', height: getHeight + 'px' }">
			<cover-view class="topBox">
				<cover-view class="topItem">{{nowWeek}}</cover-view>
				<cover-view class="topItem">{{nowTime +' '+nowTime2}}</cover-view>
				<cover-view class="topItem">{{address}}</cover-view>
			</cover-view>
			
			<cover-image @click="xzBtn" class="xzImg" src="https://cdn.zhoukaiwen.com/xz.png"></cover-image>
			<cover-image @click="positionBtn" class="positionImg" src="/static/images/dingwei.png"></cover-image>
			
			<cover-view class="cameraBtn" @click="takePhoto">
				<cover-view class="cameraBtn2"></cover-view>
			</cover-view>
			
		</camera>
		<view style="position: absolute;top: -999999px;">
			<view><canvas :style="{ width: w, height: h }" canvas-id="firstCanvas"></canvas></view>
		</view>
	</view>
</template>

<script>
	import QQMapWX from "@/common/qqmap-wx-jssdk.js";
	export default {
		data() {
			return {
				getHeight: '200',
				device: 'back', //前置或后置摄像头，值为front, back
				flash: 'off', //闪光灯，值为auto, on, off
				nowTime: '', //日期
				nowTime2: '', //时间
				nowTime2: '', //时间
				nowWeek: '', // 周几
				address: '',	//当前地址信息
				city: '',
				district: '',
				name:'',
				imgList: [
					
				],
				imgListData: '',

				rreportShow: false, //选择照片备注内容弹窗
				
				src:'',
				w:'',
				h:''
			}
		},
		onLoad() {
			const that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.getHeight = res.windowHeight;
				}
			});
			this.getTime();
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {

					let qqmapsdk = new QQMapWX({
						key: "xxxxx-xxxxx-xxxxx-xxxxx-xxxxx" //自己申请的key
					});
					qqmapsdk.reverseGeocoder({
						location: {
							latitude: res.latitude,
							longitude: res.longitude
						},
						success(addressRes) {
							that.address = addressRes.result.address;
							that.city = addressRes.result.address_component.city;
							that.district = addressRes.result.address_component.district;
						},
						fail(res) {}
					});
				}
			});
		},
		methods: {
			xzBtn() {
				if (this.device == 'front') {
					this.device = 'back'
				} else {
					this.device = 'front'
				}
			},
			// 点击拍照
			takePhoto() {
				var that = this;
				if (this.imgList.length < 3) {
					const ctx = uni.createCameraContext();
					ctx.takePhoto({
						quality: 'high',
						success: (ress) => {
							var tempImagePath = ress.tempImagePath;
							// 获取图片信息
							uni.getImageInfo({
								src: ress.tempImagePath,
								success: res => {
									that.w = res.width / 3 + 'px';
									that.h = res.height / 3.01 + 'px';
									let ctx = uni.createCanvasContext('firstCanvas'); /** 创建画布 */
									//将图片src放到cancas内，宽高为图片大小
									
									ctx.drawImage(ress.tempImagePath, 0, 0, res.width / 3, res.height / 3);
									
									ctx.setFontSize(18);
									ctx.setFillStyle('#FFFFFF');
									ctx.setTextAlign('center');
							// 		// ctx.rotate(30 * Math.PI / 180);//0.03
									let textToWidth = (res.width / 3) * 0.5;
									let textToHeight = (res.height / 3) * 0.9;
									ctx.fillText(that.nowTime2, textToWidth, textToHeight);
							
									ctx.setFontSize(12);
									let textToHeight2 = (res.height / 3) * 0.94;
									ctx.fillText(that.nowTime + ' ' + that.nowWeek, textToWidth, textToHeight2);
									ctx.setFontSize(9);
									let textToHeight3 = (res.height / 3) * 0.98;
									ctx.fillText(' 📍 '+ that.address, textToWidth, textToHeight3);
									
							
									ctx.draw(false, () => {
										setTimeout(() => {
											uni.canvasToTempFilePath({
												canvasId: 'firstCanvas',
												success: res1 => {
													tempImagePath = res1.tempFilePath;
													// console.log('----------',tempImagePath);
												
													
													uni.getFileSystemManager().readFile({// 【重点来啦】人家自提供的转码API
														filePath:tempImagePath,// 所需转码图像路径
														encoding:"base64",// 转码类型
														success:(res)=>{
															
														    // 生成base64
														    let imageBase64 = 'data:image/png;base64,'+res.data;
															let pages = getCurrentPages();
															//prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面，-3是上上个页面以此类推。
															let prevPage = pages[pages.length - 2];
															// 将数据返回上一个页面
															prevPage.$vm.imgList.push({
																path: tempImagePath,
																date: that.nowTime,
																time: that.nowTime3,
																week: that.nowWeek,
																address: that.address,
																imageBase64: imageBase64
															})
															uni.navigateBack();
														}
													})
													
													
													// console.log(this.imgList);
													
													// var arr = this.imgList
													// var str = '';
													// for (var i = 0; i < arr.length; i++) {
													// 	str += arr[i].src + ",";
													// }
													// this.imgListData = str;
													// console.log(this.imgListData)
												}
											});
										}, 1000);
									});
								}
							});
						}
					});
				} else {
					uni.showToast({
						title: '最大上传3张照片',
						duration: 2000,
						icon: 'none'
					});
				}

			},
			// 定位选择
			positionBtn(){
				let that = this
				uni.chooseLocation({
					success: (res) => {
						that.address = that.city+that.district+res.name
					}
				})
			},
			getTime: function() {
				var weekarr = new Array("日", "一", "二", "三", "四", "五", "六");
				var date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day;
				var timer3 = hour + ':' + minute + ':' + second;
				var timer2 = hour + ':' + minute
				this.nowTime = timer;
				this.nowTime2 = timer2;
				this.nowTime3 = timer3;
				this.nowWeek = '星期' + weekarr[date.getDay()];

				// console.log(this.nowTime);
				// console.log(this.nowTime2);
			},
			error(e) {
				console.log(e.detail);
			},
			goBack(){
				uni.navigateBack({
						delta:1,//返回层数，2则上上页
				})
			}
		}
	}		
</script>

<style lang="scss">
	.topBox {
		width: 750rpx;
		box-sizing: border-box;
		padding-top: 200rpx;
		padding-left: 30rpx;
		color: #EEEEEE;
		font-size: 34rpx;

		.topItem {
			width: 100%;
			white-space: pre-wrap;
			margin-bottom: 15rpx;
		}
	}
	.xzImg {
		width: 52rpx;
		height: auto;
		position: absolute;
		right: 44rpx;
		bottom: 580rpx;
	}
	.positionImg {
		width: 55rpx;
		height: auto;
		position: absolute;
		right: 44rpx;
		bottom: 450rpx;
	}
	.cameraBtn {
		width: 120rpx;
		height: 120rpx;
		line-height: 120rpx;
		border: 6rpx #FFFFFF solid;
		border-radius: 50%;
		padding: 8rpx;
		position: absolute;
		left: calc(50% - 60rpx);
		bottom: 210rpx;
	}
	.cameraBtn2 {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: #FFFFFF;
		text-align: center;
		color: #007AFF;
	}
</style>