Novelty Polygonal Mathematics

    vue-image-annotation

    1.0.2 • Public • Published

    vue-image-annotation

    vue 图片批注组件

    demo

    示例

    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: 二进制图片内容

    Install

    npm i vue-image-annotation

    DownloadsWeekly Downloads

    1

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    5.66 MB

    Total Files

    43

    Last publish

    Collaborators

    • wawjqyh