vue-img-annotation

从业务项目 image_annotate.vue 抽离的 Vue 2 图片标注组件，可发布到 npm。

支持矩形、椭圆、箭头、直线、画笔、荧光笔、马赛克、文字、序号。完成后输出 PNG DataURL。

安装

npm install vue-img-annotation fabric vue@2

vue（^2.6）和 fabric（^5）为 peer 依赖。原业务项目已包含二者，直接安装本包即可。

用法

源码 SFC（Vue CLI / vue-loader，推荐接入现有项目）

import ImageAnnotate from 'vue-img-annotation/vue'

export default {
  components: { ImageAnnotate },
  data() {
    return {
      annotateVisible: false,
      annotateImgUrl: ''
    }
  },
  methods: {
    onAnnotateSave(dataUrl) {
      this.annotateVisible = false
    }
  }
}

<ImageAnnotate
  v-if="annotateVisible"
  :img-url="annotateImgUrl"
  @save="onAnnotateSave"
  @cancel="annotateVisible = false"
  @error="(msg) => this.$message && this.$message.error(msg)"
/>

构建产物

import ImageAnnotate from 'vue-img-annotation'
import 'vue-img-annotation/style.css'

Vue.component('ImageAnnotate', ImageAnnotate)
// 或
Vue.use(ImageAnnotate)

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | imgUrl | String | '' | 待标注图片 URL / DataURL | | hint | String | 快捷键提示 | 顶部提示文案 | | emptyError | String | 没有可标注的图片 | 无图片时的错误信息 | | loadError | String | 图片加载失败 | 图片加载失败信息 | | zIndex | Number/String | 20001 | 遮罩层级 | | appendToBody | Boolean | true | 是否挂到 document.body | | defaultTool | String | 'rect' | 初始工具 | | defaultColor | String | '#ff3b30' | 初始颜色 | | defaultStrokeWidth | Number | 3 | 初始线宽 | | colors | String[] | 红/黄/绿/蓝/白/黑 | 调色板 |

Events

| 事件 | 参数 | 说明 | | --- | --- | --- | --- | | save | dataUrl: string | 点击完成或按 Enter，输出 PNG | | cancel | -- | 点击取消或按 Esc | | error | message: string | 无图片或加载失败（不再依赖 Element UI） |

快捷键

• Delete / Backspace 删除选中
• Ctrl+Z 撤销
• Ctrl+Y 重做
• Esc 取消
• Enter 保存

本地开发

Windows 上 fabric 可能卡在编译 node-canvas。请跳过原生脚本：

cd d:\imgAnnotation
npm install --ignore-scripts
node node_modules/esbuild/install.js
npm run dev

构建与发布

npm run build
npm publish --registry=https://registry.npmjs.org/

在原项目中替换

原引用：

import ImageAnnotate from './image_annotate.vue'

安装本包后改为：

import ImageAnnotate from 'vue-img-annotation/vue'

原先组件内部的 this.$message.error 已改为 @error 事件，由宿主自行弹提示。

Links

• GitHub: https://github.com/elimy1/vue-img-annotation
• npm: https://www.npmjs.com/package/vue-img-annotation