Annotorious - JavaScript image annotation library

Annotorious - JavaScript image annotation library Demo

View Demo Full Screen View Demo New Tab

Annotorious - JavaScript image annotation library Code

HTML

<img src="https://unsplash.it/1200/768.jpg?image=250" id="cssbundle-image">

Scripts

<link rel="stylesheet" href="https://cssbundle.com/js/annotorious-2.5.7/annotorious.min.css" />
<script src="https://cssbundle.com/js/annotorious-2.5.7/recogito-polyfills.js"></script>
<script src="https://cssbundle.com/js/annotorious-2.5.7/annotorious.min.js"></script>

Javascript

var anno = Annotorious.init({
  image: document.getElementById('cssbundle-image')
});

// Load annotations in W3C Web Annotation format
anno.loadAnnotations('annotations.json');

// Attach listeners to handle annotation events
anno.on('createAnnotation', function(annotation)) {
  console.log('Created!');
};