marker.js 2 Documentation: Using marker.js with Vue.js

Using marker.js with Vue.js

In this walkthrough we will create a simple Vue.js app (using Vue CLI), add an image to it, and then add marker.js 2 wired up to annotate that image.

Follow along or just lookup the sections you are interested in below.

Create a Vue App

Let’s create a simple Vue.js app as the basis for our project. We will use Vue CLI for this.

vue create my-vue-marker-app

We will go with the "Manually select features" option in the menu. Check "Choose Vue version", "Babel", and "TypeScript" in the next step. We can uncheck everything else for this walkthrough. Press Enter to continue.

Here are the choices I'm making in the next steps:

Vue version - 3.x
Use class-style component syntax? - yes
Use Babel alongside TypeScript - yes
Where do you prefer placing config for ... - In dedicated config files

Now our app is scafolded for us and we can start our project.

Basic app setup

Let's remove the Vue logo from App.vue and change the message for the HelloWorld component so our App.vue looks like this:

<template>
  <HelloWorld msg="marker.js 2 Vue Demo."/>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import HelloWorld from './components/HelloWorld.vue';

@Options({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Now, add some image to the src/assets folder (say, sample.jpg) and let's add it to our component in HelloWorld.vue.

For this, remove everything in the template except for the message and add an image tag to display our sample image. At this point HelloWorld.vue should look like this:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <img ref="imgRef"
      src="./../assets/sample.jpg" 
      style="max-width: 50%;" 
      />
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';

@Options({
  props: {
    msg: String
  }
})
export default class HelloWorld extends Vue {
  msg!: string
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Note that we've added a ref attribute to our img tag so we can later reference it in our code.

With all of this in place we are ready to add marker.js 2.

Add marker.js 2

Now that we have our base project setup, it is time to add marker.js 2.

Run:

npm install markerjs2

yarn add markerjs2

After that we can import marker.js into our component and then wire it up.

import * as markerjs2 from 'markerjs2';

Let's create a showMarkerArea() method that we will then call to start annotating:

showMarkerArea() {
  // create a marker.js MarkerArea
  const markerArea = new markerjs2.MarkerArea(this.$refs.imgRef);
  // attach an event handler to assign annotated image back to our image element
  markerArea.addEventListener('render', event => {
    this.$refs.imgRef.src = event.dataUrl;
  });
  // launch marker.js
  markerArea.show();  
}

The only thing left now is to wire this method up so that when a user clicks on the image marker.js starts and they can start annotating.

<img ref="imgRef"
  src="./../assets/sample.jpg" 
  style="max-width: 50%;" 
  @click="showMarkerArea" />

And that's all there is. Your final HelloWorld.vue should look something like this:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <img ref="imgRef"
      src="./../assets/sample.jpg" 
      style="max-width: 50%;" 
      @click="showMarkerArea" />
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import * as markerjs2 from 'markerjs2';

@Options({
  props: {
    msg: String
  }
})
export default class HelloWorld extends Vue {
  msg!: string;

  // specify type for our reference
  $refs!: {
    imgRef: HTMLImageElement;
  }

  showMarkerArea() {
    // create a marker.js MarkerArea
    const markerArea = new markerjs2.MarkerArea(this.$refs.imgRef);
    // attach an event handler to assign annotated image back to our image element
    markerArea.addEventListener('render', event => {
      this.$refs.imgRef.src = event.dataUrl;
    });
    // launch marker.js
    markerArea.show();  
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

JavaScript version of this demo in CodeSandbox