在图片上进行标注画红色虚线矩形框，可以画多个矩形框多个标注信息；同时可以具有编辑，清除，保存等功能，可以把标注信息红色矩形框相关信息保存起来，可存储在服务器，然后在图片上复现标注矩形框（一）

最近公司项目需要对图片进行标注，然后把标注信息通过接口存到后台，下次进入的时候获取标注信息并展示在前端图片上。功能简单描述一下：三个按钮开始绘制，清除，保存；编辑模式下才能清除和保存；点击某个矩形敲击键盘Backspace可以删除对应的矩形；画一个矩形框后会出现输入框，输入的文字会展示在矩形框上面；非编辑模式清除和保存禁用；矩形信息通过数组存储起来，方便存到服务器，下次进入可以复现标注信息。
话不多说，直接上最初版本的，最基础版本，各位可以根据自己的需求对初始版本进行加工成适合自己项目的功能；初级版本功能有瑕疵，可以根据自己项目进行修改。
可以扩展很多功能例如：
1、按钮区域增加上传图片，底部右侧展示一个图片列表；选中哪个图片就标注哪个图片就给哪个图片画红色虚线矩形边框；这个图片列表也可以来自远程服务器；
2、底部右侧有许多文字描述，选中文字描述，绘制矩形框的时候就把文字描述同时绘制在图片上

样式结构部分

<template>
  <div id="markBox">
    <div class="box-top">
        <button class="btn-item" @click="toggleEditing">{
  { isEditing ? "退出编辑" : "开始绘制" }}</button>
        <button class="btn-item" @click="clearRectangles" :disabled="!isEditing">清除</button>
        <button class="btn-item" @click="saveRectangles" :disabled="!isEditing">保存</button>
    </div>
    <div class="box-bottom">
    <input
      v-if="selectedRectIndex !== null"
      type="text"
      v-model="rectangles[selectedRectIndex].description"
      @input="updateDescription"
      placeholder="输入描述文字"
    />
    <canvas
      ref="canvas"
      :width="imageWidth"
      :height="imageHeight"
      @mousedown="onMouseDown"
      @mousemove="drawRect"
      @mouseup="endDrawing"
    ></canvas>
    <img  :src="imageSrc"  alt="Image"  @load="initializeCanvas"  style="display: none"/>
    </div<