存在一個需求同豆包的圖像生成的區域重繪功能，類似與下面這種
拆解一下需求，
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>&
