uniapp如何实现一个图片涂抹任意位置获取蒙版图代码？

我写了一个基础的图片预览画笔涂改局部区域形成蒙版的组件，蒙版图片尺寸与原图一致，效果如下：

实现的uniapp组件代码如下：

点击查看代码

<template>
	<view class="image-mask-editor">
		<view v-if="!imagePath" class="upload-container">
			<button @tap="chooseImage">上传图片</button>
		</view>

		<view v-else class="canvas-container"
			style="position: fixed; top: 0;bottom: 0;left:0;right:0; width: 100%;z-index:3;background-color: black;">

			<view style="position: relative;">
				<!-- <canvas style="display: none;" canvas-id="myCanvas" :style="canvasStyleexport" ></canvas> -->


				<image :src="imagePath" mode="widthFix" class="background-image" :style="imgStyle"></image>
				<canvas canvas-id="maskCanvas" class="maskCanvas" :style="canvasStyle" @touchstart="touchstartmask"
					@touchmove="touchmovemask" @touchend="touchendmask"></canvas>
				<view class="controls">
					<button @tap="clearMask">清除遮罩</button>
					<button @tap="getMaskImage">预览遮罩图</button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ctx: null,
				scaleratio: 0,
				imgrealWidth: 0,
				imgrealHeight: 0,
				screenWidth: 0,
				screenHeight: 0,
				canvasStyle: '',
				soureimgPath: "", //原图压缩后与蒙版图尺寸一致
				imgStyle: '',
				imagePath: '',
				points: [], //路径点集合
				isDrawing: false,
				lastX: 0,
				lastY: 0,
			}
		},
		onReady() {
			// 获取屏幕宽度
			uni.getSystemInfo({
				success: (res) => {
					this.screenWidth = res.windowWidth
					this.screenHeight = res.windowHeight
				}
			})
		},
		methods: {
			chooseImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.soureimgPath =  res.tempFilePaths[0]
						this.imagePath = res.tempFilePaths[0]
						this.$nextTick(() => {
							this.initCanvas()
						})
					}
				})
			},
			initCanvas() {
				// 获取图片尺寸以设置画布大小
				uni.getImageInfo({
					src: this.imagePath,
					success: (imageInfo) => {
						// 设置 canvas 的实际尺寸为图片尺寸
						this.imgrealWidth = imageInfo.width;
						this.imgrealHeight = im...

点击查看剩余70%