uni-app移动端使用uni-file-picker上传图片时通过canvas添加拍摄时间等水印信息

实现效果：

添加的照片添加水印信息

实现方式：

将添加水印的方法抽离成组件，为Vue文件，方便复用，在父组件中直接引用即可实现水印效果。

子组件：waterMarker.vue   

此为添加水印的组件文件，实现了在图片中添加水印，本示例在图片中添加了拍摄人、拍摄时间和拍摄经纬度的水印信息，其中拍摄人是从缓存中获取，拍摄时间为实时时间，拍摄经纬度根据mapbox获取当前位置信息的方法获取。此处展示的水印信息可根据个人需求灵活调整，如字体大小、字体颜色、背景颜色等，均支持自定义。

<template>
	<canvas v-if="waterMarkParams.display" canvas-id="waterMarkCanvas" :style="canvasStyle" />
</template>
<script>
	export default {
		data() {
			return {
				userLocation: {
					lng: 124.066873,
					lat: 40.45218,
				}, // 地图图标的默认位置--凤城市市政府
				waterMarkParams: {
					display: false, // 控制 canvas 创建与销毁
					canvasWidth: 300, // 默认宽度
					canvasHeight: 225, // 默认高度
					contentHeight: 170, // 将要被绘制到图像中的矩形的高度(px)
				},
				username: "YourUsername", // 假设的用户名
			}
		},
		computed: {
			// 画布
			canvasStyle() {
				return {
					position: "fixed", // 移除到屏幕外
					left: "9999px",
					width: this.waterMarkParams.canvasWidth + "px",
					height: this.waterMarkParams.canvasHeight + "px",
				};
			},
		},
		mounted() {
			this.getUserLocation(); // 获取当前所在位置
		},
		methods: {
			// 因为有可能在相册中选择多个图片，所以这里要依次生成水印
			async callAddWaterMark(imgPathArr) {