前端页面对图片标注，绘制红色矩形框并在上边框添加文字，可以对一张图片进行多个标注，获取标注信息存到数据库。等下次加载把标注信息再复现到图片上，可以对标注的矩形框进行删除(二）

接上一篇文章 图片标注功能，这次对vue项目中对图片标注功能，在图片上绘制红色矩形框并且可以在矩形框上添加文字说明，进行了功能的细化，逻辑上的处理，增加了一些功能,完善了一些，处理的一些存在的问题。下面对这个某块进行详细的功能说明。
在图片上进行红色矩形框的绘制并且在上边框添加文字，同时可以对一张图片进行多个标注，可以获取标注信息保存起来，存到数据库。等下次加载把标注信息再复现到图片上，可以对标注的矩形框进行删除。
页面布局如图所示：

1、非编辑模式下禁用清除、保存，文字添加功能；
2、编辑模式下，首先会获取对应图片的标注。有标注信息就绘制在图片上。
3、鼠标按下收起绘制好了一个矩形，可以输入文字描述，点击添加可以对红色矩形框标注添加文字说明。鼠标选中哪一个红色矩形框标注就可以给哪个红色矩形框添加说明。
4、鼠标点击图片上的红色矩形框标注，按键盘backspace可以删除该矩形框。
5、点击清除，会清除图片上临时的红色矩形框标注信息，然后点击保存才是真正对图片上的标注进行了清除；
6、点击退出编辑：会判断上次的标注信息和这次是否一样，一样就直接退出。不一样的话弹出提示，还未保存是否退出？确定的话就直接退出，新增加的红色矩形框标注会清理，保存之前的。取消的话不做任何操作。
7、编辑模式下，不允许切换照片。非编辑模式下，切换照片后，会绘制当前照片所保存的标注信息。
说明：该功能还存在一些瑕疵，等有空了继续修改。
代码如下:
这是html

<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">
      <div class="box-bottom-top">
        <data
          class="img-item"
          :class="{ 'img-item-active': curPic == item.id }"
          v-for="(item, index) in srcList"
          :key="index"
          @click="cilckPic(item)"
        >
          <img :src="item.src" alt="" />
        </data>
      </div>
      <div class="box-bottom-bottom">
        <div class="inputbox">
          <input
            type="text"
            v-model="description"
            placeholder="输入描述文字"
            :disabled="!isEditing"
            @focus="isInputFocus = true"
            @blur="isInputFocus = false"
          />
          <button
            class="add-btn"
            @click="updateDescription"
            :disabled="!isEditing"
          >
            添加
          </button>
        </div>
        <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>
    </div>
  </div>
</template>