存在一个需求同豆包的图像生成的区域重绘功能，类似与下面这种

拆解一下需求，

1、鼠标移动上图像画面时出现跟随鼠标移动的空心圆形，移出图像画面、鼠标点击后、鼠标按下移动时消失，鼠标松开再次出现。

2、鼠标按下出现圆形透明颜色大小同空心圆形、鼠标按下移动形成轨迹，类似涂鸦笔效果，末端是圆形，鼠标松开后涂鸦效果结束。

3、鼠标松开后出现发送框，跟随鼠标松开的位置，鼠标点击后发送框消失。

4、鼠标松开即为一次记录，上方可以进行撤销还原操作，点击清空则清除所有涂鸦痕迹。

5、上方滑块进行更改涂鸦以及空心圆的直径大小。

6、需要导出base64的mask图（涂鸦痕迹）

需求实现思路：

使用canvas去实现该功能，至少需要三个canvas，第一个将图片铺到canvas上，第二个绘制涂鸦内容，第三个跟随鼠标的光圈。还需要一个临时的canvas去生成mask图（mask图需要大小跟图像实际大小一致）

相关代码如下：

<template><div class="img-edit-box"><div class="img-edit-box-top" v-if="currentImgEdit == 'all'"><div class="img-edit-btn-box" @click="quoteImgEditChange"><!-- @click="quoteChange(true, currentImgUrl, 'imageEdit', currentImgQuestion)" --><div class="img-edit-btn-zhineng"></div><div class="img-edit-btn-text">智能编辑</div></div><div class="img-edit-btn-box" @click="changeEditStatus('scope')"><div class="img-edit-btn-chonghui"></div><div class="img-edit-btn-text">区域重绘</div></div><!-- <div class="img-edit-btn-box"><div class="img-edit-btn-kuotu"></div><div class="img-edit-btn-text">扩图</div></div> --><!-- <div class="img-edit-btn-box"><div class="img-edit-btn-cachu"></div><div class="img-edit-btn-text">擦除</div></div> --><div class="img-edit-btn-right to-right"><divclass="img-edit-btn-box"@click="downloadBase64"><div class="img-edit-btn-download"></div><div class="img-edit-btn-text">下载原图</div></div><div class="divide-line"></div><div class="img-edit-btn-box close-box" @click="closeImgEditVisible"><div class="close-icon"></div></div></div></div><div v-if="currentImgEdit == 'scope'" class="img-edit-box-top flex-center"><div class="img-edit-btn-left"><divclass="img-edit-btn-box close-box"@click="changeEditStatus('all')"><div class="back-icon"></div></div></div><div class="img-edit-btn-center"><!-- <div class="img-edit-btn-box"><div class="img-edit-btn-download"></div></div> --><div class="img-edit-btn-slider"><el-sliderv-model="circleDiameter":min="30":max="100"input-size="mini"@mousedown="clickCircleDiameter"@change="changeCircleDiameter"@input="inputCircleDiameter"></el-slider></div><div class="divide-line"></div><divclass="close-box":class="[step == 0 ? 'img-edit-btn-box-none' : 'img-edit-btn-box']"@click="undo"><div class="chexiao-icon"></div></div><divclass="close-box":class="[step == history.length - 1? 'img-edit-btn-box-none': 'img-edit-btn-box',]"@click="redo"><div class="huanyuan-icon"></div></div><div class="divide-line"></div><div:class="[step == 0 ? 'img-edit-btn-box-none' : 'img-edit-btn-box']"style="width: max-content"@click="clearCanvas">清除</div>&