element-ui 上传图片后标注坐标点

下面将详细讲解“element-ui上传图片后标注坐标点”的完整攻略。

准备工作

1. 安装 element-ui 组件库和 vue-cropperjs 图片裁剪插件。

npm install element-ui vue-cropperjs --save

1. 引入 element-ui 中的 Upload 和 Dialog 组件。

<template>
  <div>
    <el-upload 
      class="upload-demo"
      :action="actionUrl"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
    >
      <el-button slot="trigger">选取图片</el-button>
    </el-upload>

    <el-dialog 
      v-model="dialogVisible" 
      title="标注图片"
      width="60%"
    >
      <div class="wrapper">
        <el-image 
          ref="imageEditor" 
          :src="currentImgUrl"
          fit="contain"
          style="max-height: 80vh;"
        ></el-image>

        <button @click="handleComplete">完成标注</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Upload, Dialog, Image } from 'element-ui'
import VueCropperjs from 'vue-cropperjs'
import 'cropperjs/dist/cropper.css'

export default {
  components: {
    'el-upload': Upload,
    'el-dialog': Dialog,
    'el-image': Image,
    VueCropperjs
  },
  data() {
    return {
      actionUrl: 'https://www.yourserver.com/upload', // 上传图片的接口地址
      currentImgUrl: '', // 当前上传的图片链接
      dialogVisible: false, // 标注图片的弹窗是否可见
      markerList: [], // 存储标注点信息的列表
      cropper: null // Cropper 实例对象
    }
  },
  methods: {
    // 图片上传前的处理方法
    beforeUpload() {
      // 这里可以进行一些上传前的校验，如图片大小、格式等。
      return true
    },
    // 上传成功后的处理方法
    handleSuccess(response) {
      this.currentImgUrl = response.data.url
      this.dialogVisible = true
    },
    // 弹窗中点击完成标注按钮的处理方法
    handleComplete() {
      this.markerList = this.cropper.getData()

      // 这里可以将 markerList 数据存入后台，也可以直接在前端进行使用。
      console.log(this.markerList)

      this.dialogVisible = false
    }
  },
  mounted() {
    // 创建 Cropper 实例
    this.cropper = new Cropper(this.$refs.imageEditor.$el, {
      aspectRatio: 16 / 9,
      crop: e => {
        // 每次标注点改变时触发，可在这里实时获取标注点坐标。
        console.log(e.detail.x, e.detail.y)
      }
    })
  }
}
</script>

<style>
.wrapper {
  padding: 30px;
}
</style>

攻略步骤

1. 在 upload 组件中添加上传图片的接口地址。
2. 在上传成功后的回调函数中显示标注图片的弹窗，并将上传的图片链接存入 currentImgUrl 变量中。
3. 在弹窗中引入 vue-cropperjs 组件，并创建 Cropper 实例。aspectRatio: 16 / 9 表示裁剪框的宽高比为 16:9，可以根据实际需求进行修改。
4. 点击 “完成标注” 按钮后，调用 cropper.getData() 方法获取当前所有标注点的坐标，并将坐标存入 markerList 列表中。
5. 可选的，可以在 mounted 钩子函数中添加 cropper.crop 监听事件实时获取标注点坐标，配合 @click="handleComplete" 点击完成标注按钮使用。

示例说明

示例1：上传图片并标注坐标点

1. 点击 “选取图片” 按钮上传图片。
2. 标注图片中的图像区域，生成标注点。
3. 点击 “完成标注” 按钮，将标注点的坐标保存到 markerList 变量中。

示例2：使用获取的标注点坐标绘制图形

1. 前端获取后台返回的标注点坐标。
2. 使用 Canvas 绘制出相应的形状，如圆、矩形等。
3. 将绘制后的图片显示在页面中。

具体实现可以参考 Canvas 绘图的相关文档。