IMPORTANT This repository is work in progress. I am building the next major release of Annotorious. If you are looking for the most recent official release, visit the main project homepage. Documentation in this Readme is only for the upcoming alpha release and will not work with Annotorious 2.7.x!
Add image annotation functionality to any Web page with a few lines of JavaScript. 🚀 Easy to integrate 🎨 fully customizable 🪶 weighs less than 100kB.
Install from npm.
npm install --save @annotorious/annotoriousImport CSS style and initialize Annotorious.
import { Annotorious } from '@annotorious/annotorious';
import '@annotorious/annotorious/dist/annotorious.css';
// Image element ID or DOM element
const anno = Annotorious('sample-image');
// Load annotations in W3C Web Annotation format
anno.loadAnnotations('./annotations.w3c.json');
// Attach listeners to handle annotation events
anno.on('createAnnotation', function(annotation) {
console.log('created', annotation);
});Install Annotorious React binding.
npm install --save @annotorious/reactImport Annotorious CSS style and wrap your image with the ImageAnnotator component to make it annotatable.
import { Annotorious, ImageAnnotator } from '@annotorious/react';
import '@annotorious/annotorious/dist/annotorious.css';
export function AnnotatableImage() => {
return (
<Annotorious>
<ImageAnnotator>
<img src="my-image.jpg" alt="Example" />
</ImageAnnotator>
</Annotorious>
)
}You can support by work with a one-time or recurring donation on SteadyHQ.
Want to help make Annotorious better? There are many ways to get involved - including some that require little or no coding experience!
Check the list of current open issues, in particular those with the help wanted or hacktoberfest tags. See the Contribution Guide to learn more.