vue-image-annotate做图像标注

Vue Image Annotate 是一个基于 Vue3 和 Konva.js 的图像标注组件库，可以用于在图片上进行标注。下面是一个简单的示例，演示如何使用 Vue Image Annotate 进行图像标注：

首先，安装 vue-image-annotate：

npm install vue-image-annotate

然后，在你的 Vue 组件中导入并使用 Vue Image Annotate：

<template>
  <div>
    <vue-image-annotate ref="annotate" :image-url="imageUrl" @annotation-updated="onAnnotationUpdated"></vue-image-annotate>
    <button @click="saveAnnotations">保存标注</button>
  </div>
</template>

<script>
import VueImageAnnotate from 'vue-image-annotate';

export default {
  components: {
    VueImageAnnotate,
  },
  data() {
    return {
      imageUrl: 'path/to/your/image.jpg',
    };
  },
  methods: {
    onAnnotationUpdated(annotations) {
      // 在标注更新时触发此回调函数
      console.log('标注更新:', annotations);
    },
    saveAnnotations() {
      const annotations = this.$refs.annotate.getAnnotations();
      // 将标注数据保存到后端或本地存储等
      console.log('保存标注:', annotations);
    },
  },
};
</script>

在上述示例中，我们首先导入了 `vue-image-annotate` 组件，并在模板中使用了 `<vue-image-annotate>` 标签来显示图像和进行标注。通过 `:image-url` 属性可以指定要显示的图片路径。`@annotation-updated` 事件会在标注更新时触发，你可以在回调函数中处理标注数据。点击 "保存标注" 按钮时，我们调用 `getAnnotations` 方法获取当前的标注数据。

这只是一个简单的示例，你可以进一步自定义和扩展 Vue Image Annotate 来满足你的具体需求。更多用法和配置选项，你可以参考 Vue Image Annotate 的官方文档。