Posted in
3881
5:06 am, October 12, 2021
Annotorious - JavaScript image annotation library
Have you ever wanted to add some comments on an image but dont want to have those comments or text items actually added to the image? Well this is where the library Annotorious comes in.
What does Annotorious do?
With Annotorious you can add comments or notations on top of your images. Set them your self and have them displayed when activated by the end user.
Note: I cant get this demo working 😥 I would suggest something like marker js, which is super easy to get working.
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!');
};
External Link for Annotorious - JavaScript image annotation library
Add Comment
Other Items in javascript
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
css animations
HTML Canvas
javascript