AI图像标注软件

$$AI图像标注软件$$

---

AiLabel学习交流群
qq群号 632162227

---

链接：https://pan.baidu.com/s/190vEJ0mRpqHZks-uMpDd1g?pwd=1234
提取码：1234

---

1.html、css前置基础常识

---

2.制作快捷导航 (shortcut)

---

3.页面布局

---

4.标注软件的图像加载和显示

---

5.绘制并保存标注

---

6. 导出图像和标注

<li>
    <!-- 导出图像和标注 -->
    <el-button type="primary" @click="ExportJsonAndImgs()">
      导出</el-button>
</li>

    // 导出图像和标注
    downLoadLabelAndImg(){
   
        const url = "/downLoadLabelAndImg"
        return this.http.get(url) 
    }

// 导出标注和图像
ExportJsonAndImgs(){
   

 this.$http.downLoadLabelAndImg().then(res=>{
   

   let result = res['data']
        let code = result['code']
        if(code == 200){
   
             ElMessage.success("xxxxxxx！")
             window.open("http://127.0.0.1:5000/static/data.zip", '_blank');

        }

 })

},

flask后端

@app.route("/downLoadLabelAndImg")
def downLoadLabelAndImg():
    import zipfile
    # 1.创建zipFile对象
    zipfile_obj = zipfile.ZipFile('./static/data.zip', 'w')
    # 2.将所有图像文件放到压缩对象中
    all_imgs = get_files_path(r"./static/images")
    for item in all_imgs:
        zipfile_obj.write(item)
    # 3.将所有标注文件放到压缩对象中
    all_labels = get_files_path(r"./static/labels")
    for item in all_labels:
        zipfile_obj.write(item)
    # 4.关闭ZIP文件对象，以确保ZIP文件正确保存
    zipfile_obj.close()

    # file = open("./static/data.zip", "rb").read()
    # response = make_response(file)
    # return response
    # #
    return restful.ok()

---

7.高亮显示选中标注的图像

<!-- 图像列表显示 -->
<el-table :data="imgNameList" height="650" style="width:100%" 	@row-click="imgSelected"  highlight-current-row>
   <el-table-column prop="index" label="id" width="50px"></el-table-column>
   <el-table-column prop="imgName" label="图像名称" width="150px" ></el-table-column>
</el-table>

---

8.添加图像删除功能

<!-- 图像列表显示 -->
<el-table :data="imgNameList" height="650" style="width:100%" 	@row-click="imgSelected"  highlight-current-row>

  <el-table-column fixed="left" label="x" width="40px">
    <template #default="scope">
      <el-icon :size="20" @click="deleteImg(scope.$index)"><Delete /></el-icon>
    </template>
  </el-table-column>
   <el-table-column prop="index" label="id" width="50px"></el-table-column>
   <el-table-column prop="imgName" label="图像名称" width="150px" ></el-table-column>
</el-table>

完整代码

<template>
  <!-- 主窗体 -->
 <div class="main">
    <!-- 快捷导航 -->
    <div class="shortcut">
      <div class="wrapper">
        <ul>
          <li><a href="#">主页面</a></li>
          <li><a href="#">返回</a></li>
        </ul>
      </div>
    </div>

    <!-- 头部区域 -->
    <div class="header wrapper">
       <!-- 功能键 -->
       <div class="operation">
                <ul>
                  <li>
                    <!-- 矩形 -->
                    <el-button type="text" @click="setMode('RECT')">
                      <el-icon><FullScreen /></el-icon>
                      矩形</el-button>
                  </li>
                  <li>
                    <!-- 圆 -->
                    <el-button type="text"  @click="setMode('CIRCLE')">
                      <el-icon><Aim /></el-icon>
                      圆</el-button>
                  </li>
                  <li>
                    <!-- 多边形 -->
                    <el-button type="text" @click="setMode('POLYGON')">
                      <el-icon><House /></el-icon>多边形
                    </el-button>
                  </li>
                  <li>
                    <!-- 撤回 -->
                    <el-button type="text"  @click="Revoke()">
                      <el-icon><RefreshLeft /></el-icon>
                      撤销</el-button>      
                  </li>
                  <li>
                    <!-- 获取标注数据 -->
                      <el-button type="text" @click="getFeatures()">
                        <el-icon><ZoomIn /></el-icon>
                        获取标注数据</el-button>
                  </li>
                  <li>
                      <!-- 测试 -->
                      <el-button type="primary" @click="SaveJson()">
                        保存json</el-button>
                  </li>
                </ul>

      </div>


    </div>

    <!-- 中间内容区域 -->
    <div class="container wrapper">
        <!-- 左侧区域 -->
        <div class="left">
            <!-- 左侧工具栏 -->
            <div class="lefttool">
              <ul>
                <li> 
                    <!-- 上传图像 -->
                    <el-upload
                      action="http://127.0.0.1:5000/uploadImgs"
                      method="post"
                      :show-file-list="false"
                      name = "image"
                      multiple
                      :on-success="onImagesUploadSuccess"
                      >
                        <el-button>上传图像</el-button>
                    </el-upload>

                </li>
                <li> 
                  <!-- 上传标签 -->
                  <el-upload
                      action="http://127.0.0.1:5000/uploadlabels"
                      method="post"
                      :show-file-list="false"
                      name = "label"
                      multiple
                    >
                      <el-button> 上传标签</el-button>
                  </el-upload>
                </li>
              </ul>
            </div>
            <!-- 图像列表显示 -->
            <el-table :data="imgNameList" height="650" style="width:100%" 	@row-click="imgSelected">
               <el-table-column prop="index" label="id" width="50px"></el-table-column>
               <el-table-column prop="imgName" label="图像名称" width="150px" ></el-table-column>
            </el-table>


        </div>


        <!-- 中部区域 -->
        <div class="middle">
           <!-- 绘图区域 -->
           <div class="mapRegion">
                <!-- 鼠标坐标显示 -->
                <span>X:{
   {
    mouseX }}  Y:{
   {
    mouseY }}</span>
                <!-- 换行线 -->
                <hr>
                <!-- 画布 -->
                <div id="map"></div>
           </div>

        </div>

        <!-- 右部区域 -->
        <div class="right">

          <!-- 类别 -->
          <!-- 1.添加和导入标签 -->
          <div class="addAndExportLabel">

              <ul>
                      <li><el-button size="small" @click="showAddClsName()">添加</el-button></li>
                      <li><el-button size="small"  @click="showImportClsNameList()">导入</el-button></li>
              </ul>

           </div>
          <!-- 2.显示： id  名称 -->
          <h4>类别</h4>
          <el-table :data="labelClsNameList" height="200px" style="width: 100%">
            <el-table-column prop="id" label="Id" width="40px"/>
            <el-table-column prop="name" label="Name" width="80px" />
            <el-table