uni-app如何对拍摄的照片加水印？

最近一个项目需求：对拍摄的照片或者手机中选择的照片加水印进行处理，通过研究，我们知道uview的插件市场中有很多这样的组件，地址是https://ext.dcloud.net.cn/search，可以在网址中搜索水印，有很多这样的组件，如下图所示：

好啦!进入正式的主题吧，先给大家看一下效果图：


好啦，直接上代码吧

<template>
	<view class="u-upload" v-if="!disabled">

		<view v-if="showUploadList" class="u-list-item u-preview-wrap" v-for="(item, index) in lists" :key="index"
			:style="{
				width: $u.addUnit(width),
				height: $u.addUnit(height)
			}">
			<view v-if="deletable" class="u-delete-icon" @tap.stop="deleteItem(index)" :style="{
					background: delBgColor
				}">
				<u-icon class="u-icon" :name="delIcon" size="20" :color="delColor"></u-icon>
			</view>
			<u-line-progress v-if="showProgress && item.progress > 0 && !item.error" :show-percent="false" height="16"
				class="u-progress" :percent="item.progress"></u-line-progress>
			<view @tap.stop="retry(index)" v-if="item.error" class="u-error-btn">点击重试</view>

			<image @tap.stop="doPreviewImage(item.url || item.path, index)" class="u-preview-image" v-if="!item.isImage"
				:src="item.url || item.path" :mode="imageMode"></image>

		</view>
		<slot name="file" :file="lists"></slot>
		<view style="display: inline-block;" @tap="selectFile" v-if="maxCount > lists.length">
			<slot name="addBtn"></slot>
			<view v-if="!customBtn" class="u-list-item u-add-wrap" hover-class="u-add-wrap__hover" hover-stay-time="150"
				:style="{
					width: $u.addUnit(width),
					height: $u.addUnit(height)
				}">
				<u-icon name="plus" class="u-add-btn" size="40"></u-icon>
				<view class="u-add-tips">{
  { uploadText }}</view>
			</view>
		</view>
		<view class="">
			123
			<canvas :style="{width:cwidth+'px',height:cheight+'px'}" canvas-id="firstCanvas" id="firstCanvas"></canvas>
		</view>
	</view>
</template>

<script>
	/**
	 * upload 图片上传
	 * @description 该组件用于上传图片场景
	 * @tutorial https://www.uviewui.com/components/upload.html
	 * @property {String} action 服务器上传地址
	 * @property {String Number} max-count 最大选择图片的数量（默认99）
	 * @property {Boolean} custom-btn 如果需要自定义选择图片的按钮，设置为true（默认false）
	 * @property {Boolean} show-progress 是否显示进度条（默认true）
	 * @property {Boolean} disabled 是否启用(显示/移仓)组件（默认false）
	 * @property {String} image-mode 预览图片等显示模式，可选值为uni的image的mode属性值（默认aspectFill）
	 * @property {String} del-icon 右上角删除图标名称，只能为uView内置图标
	 * @property {String} del-bg-color 右上角关闭按钮的背景颜色
	 * @property {String | Number} index 在各个回调事件中的最后一个参数返回，用于区别是哪一个组件的事件
	 * @property {String} del-color 右上角关闭按钮图标的颜色
	 * @property {Object} header 上传携带的头信息，对象形式
	 * @property {Object} form-data 上传额外携带的参数
	 * @property {String} name 上传文件的字段名，供后端获取使用（默认file）
	 * @property {Array<String>} size-type original 原图，compressed 压缩图，默认二者都有（默认['original', 'compressed'