ocr-drawlabel

ocr-drawlabel

Introduction

ocr-drawlabel 是基于vue、fabric框架开发，绘制标注、表格等 代码优化中

示例代码 ：https://gitee.com/egsong/ocr-draw-label-examples

Installation

npm install ocr-drawlabel -S

Usage

// 依赖
import 'fabric'
import 'fabric-customise-controls';
import 'ocr-drawlabel/lib/ocr-drawlabel.css';
import OCRDrawLabel from 'ocr-drawlabel';
Vue.use(OCRDrawLabel);

<ocr-drawlabel  ref="addrawlabel" :id="'addrawlabel'" :options="option"  @updatedObject="updatedObject" @addedObject="addedObject" @deleteObject="deleteObject"  @selectedObject="selectedObject"></ocr-drawlabel>

<template>
  <div class="warp">
    <div class="btn-box">
      <button @click="clear()">清空画布</button>
      <button @click="init()">初始化</button>
      <button @click="update()">换一张</button>
      <button @click="select(4)">选中</button>
      <button @click="select('3')">选中</button>
      <button @click="select('5')">选中</button>
      <button @click="discardActiveObject()">取消</button>
      <select name="" id="" @change="selectChange">
        <option value="1">111</option>
        <option value="<script>function(){alert(111)}()</script>">222</option>
        <option value="1">333</option>
      </select>
    </div>
    <div class="content">
      <div class="drawlabel-box">
        <ocr-drawlabel  ref="addrawlabel" :id="'addrawlabel'" :options="option"  @updatedObject="updatedObject" @addedObject="addedObject" @deleteObject="deleteObject"  @selectedObject="selectedObject"></ocr-drawlabel>
      </div>
      <div class="right-box">
        <el-card v-for="(item, index) in data3" :key="index" class="box-card">
          <div slot="header" class="clearfix">
            ID：<span :class="item.objectId.toString().length>6 && 'fs12'">{{item.objectId}}</span>
            <el-button  @click="remove(item.objectId)" style="float: right; padding: 3px 0" type="text">删除</el-button>
          </div>
          矩形坐标：
          <div v-for="(coordinate, index) in item.coordinates" :key="index" class="text item flex">
            <span>x: {{ coordinate.x | rounding }}</span> <span>y: {{ coordinate.y | rounding }}</span>
          </div>
          
          <div v-if="item.columnList"> 表格横线坐标：
            
            <div v-for="(x, index) in item.columnList" :key="index" class="text item flex">
              <span>x: {{ x | rounding }}</span>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
      

<script>
import { mapState } from 'vuex';
import { setTimeout } from 'timers';
export default {
  name:'example',
  data(){
    return {
      url:"https://testshhzcjcdn.oss-cn-hangzhou.aliyuncs.com/html/wx_pic/fszshzj/qrcode/YF1/ewm-bg.jpg",
      labelDataOrigin: [],
      loadingData: false,
      option: {
        toolbar: ['rect', 'table', 'select', 'cut', 'delete']
      },
      data3:[
        {
          objectType:'rect',
          objectId:'3',
          coordinates:[
            {x:0,y:0},
            {x:200,y:0},
            {x:200,y:200},
            {x:0,y:200},
          ]
        }
      ]
    }
  },
  filters: {
    rounding (value) {
      return value.toFixed(2)
    }
  },
  computed: {
    ...mapState('tools', [
      'coordinatesList'
    ])
  },
  methods:{
    selectChange(val){
    },
      init(){
        // 初始化
        this.$refs.addrawlabel.initCanvas(this.url,this.data3)
      },
      update(){
        this.$refs.addrawlabel.updataData(this.url,this.data)
      },
      select(index){
        // 选中某个框
        this.$refs.addrawlabel.handleSelect(index)
      },
      remove(id){
        this.$refs.addrawlabel.handleRemove(id)
      },
      discardActiveObject(index){
        // 取消选中
        this.$refs.addrawlabel.discardActiveObject()
      },
      // 新增回传 objectId、坐标等数据
      addedObject(e){
        let object = this.data3.filter(item=>  item.objectId === e.objectId)
        if(object.length > 0) return;
        console.log('addedObject',e)
        this.data3.push(e)
      },
      // 删除回传 objectId、坐标等数据
      deleteObject(res) {
        // console.log('deleteObject',res)
      },
      // 更新回传 objectId、坐标等数据
      updatedObject(res){
        // console.log('updatedObject',res)
        
         this.data3 = this.data3.map(item=>  {
          if(item.objectId === res.objectId){
            item.coordinates = res.coordinates
            item.columnList = res.columnList
          }
          return item
        })
      },
      // 选中回传 objectId
      selectedObject(e) {
        console.log('selectedObject',e)
      },
      selectObjectSelf(e){
        console.log('selectObjectSelf',e)
      },
      updateData(e) {
        // console.log(JSON.parse(e))
      },
      clear(){
        this.$refs.addrawlabel.clearHandler()
        
      }
  }
}
</script>
      

效果展示

新加功能：鼠标右击拖拽画布