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 | 打开图片批注组件，传入图片 url | url|String: 图片地址 | | openBase64 | 打开图片批注组件，传入 base64 格式图片内容 | base64|String: base64 格式图片内容 |

注意：

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

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

Events

| 事件名称 | 说明 | 回调参数 | | -------- | -------------- | ----------------------------------- | | onSave | 保存图片时触发 | base64|String: base64 格式图片内容 | | | | file|String: 二进制图片内容 |