virages/components/annotorious.vue

<template>
  <div class="w-full h-screen">
    <section class="UI bg-red-800">
      <button @click="getAnotations()">
        get annotations
      </button>
      <button v-for="tool in tools" :key="tool" class="m-4 p-4" @click="anno.setDrawingTool(tool)">
        {{ tool }}
      </button>
    </section>
    <img id="annotorious" src="https://files.erudi.fr/virages/snake.jpg">
  </div>
</template>

<script>
import { Annotorious } from '@recogito/annotorious'
import SelectorPack from '@recogito/annotorious-selector-pack'
import BetterPolygon from '@recogito/annotorious-better-polygon'
import '@recogito/annotorious/dist/annotorious.min.css'

export default {
  data () {
    return {
      anno: null,
      tools: ['rect', 'polygon', 'point', 'circle', 'ellipse', 'freehand']
    }
  },

  mounted () {
    this.initAnno()
  },
  methods: {
    initAnno () {
      this.anno = new Annotorious({
        image: document.getElementById('annotorious'),
        widgets: ['COMMENT']
      })

      BetterPolygon(this.anno)
      SelectorPack(this.anno, {
        tools: this.tools
      })
      this.anno.setDrawingTool('polygon')

      this.anno.on('createAnnotation', function (annotation) {
        console.log('Created annotation', annotation)
      })

      this.anno.on('createSelection', function (selection) {
        console.log('Created selection', selection)
      })

      this.anno.on('deleteAnnotation', function (annotation) {
        console.log('Delete annotation', annotation)
      })

      this.anno.on('mouseEnterAnnotation', function (annotation, element) {
        console.log('Mouse ENTERED annotation', annotation)
      })

      this.anno.on('selectAnnotation', function (annotation, element) {
        console.log('Select annotation', annotation)
      })

      this.anno.on('cancelSelected', function (selection) {
        console.log('UNSELECTED')
      })

      this.anno.on('clickAnnotation', function (annotation, element) {
        console.log('Clicked annotation', annotation)
      })
    },
    getAnotations () {
      const annotations = this.anno.getAnnotations()
      console.log(annotations)
    }
  }
}

</script>