A JavaScript image annotation library. Add drawing, commenting and labeling functionality to images in Web pages with just a few lines of code. This project is a modernized reboot of the outdated original Annotorious. See the project website for details and live demos.
If you use npm, npm install @recogito/annotorious
and
import { Annotorious } from '@recogito/annotorious';
const anno = new Annotorious({ image: 'hallstatt' }); // image element or ID
Otherwise download the latest release and include it in your web page.
<script src="annotorious.min.js"></script>
<body>
<div id="content">
<img id="hallstatt" src="640px-Hallstatt.jpg">
</div>
<script>
(function() {
var anno = Annotorious.init({
image: 'hallstatt'
});
anno.loadAnnotations('annotations.w3c.json');
})()
</script>
<script type="text/javascript" src="annotorious.min.js"></script>
</body>
Full documentation is on the project website. Questions? Feedack? Feature requests? Join the Annotorious chat on Gitter.
BSD 3-Clause (= feel free to use this code in whatever way you wish. But keep the attribution/license file, and if this code breaks something, don't complain to us :-)