vue-image-annotation

vue-image-annotation

vue 图片批注组件

示例

demo https://wawjqyh.github.io/vue-image-annotation/

安装

npm

$ npm install vue-image-annotation

使用

<template>
  <div>
    <button @click="handleOpenDrawer">打开图片</button>
    <VueImageAnnotation ref="refImageDrawer" @onSave="handleSave" />
  </div>
</template>

<script>
import VueImageAnnotation from 'vue-image-annotation';

export default {
  components: { VueImageAnnotation },

  methods: {
    handleOpenDrawer() {
      // 通过 openUrl 打开批注工具，传入需要批注的图片的地址
      this.$refs.refImageDrawer.openUrl('./img.jpeg');
    },

    // 点击保存时，会将批注后的图片内容通过两种格式返回
    handleSave(base64, file) {
      console.log(base64);
      console.log(file);
    }
  }
};
</script>

Methods

注意：

openUrl 内部使用 fetch 获取图片内容，获取后添加到 canvas 中。请注意跨域问题

如果使用 openUrl 遇到问题，可以尝试自行获取图片内容，转成 base64 后通过 openBase64 方法打开组件

Events