Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+
- Image Annotation
- Angular directives to annotate individual images or a selection.
- Angular service to access all the annotarious API
- Appearance is controlled through CSS so it can be restyled.
- BETA OpenSeadragon integration. ( web-based viewer for high-resolution zoomable images )
bower install angular-annotorious
npm install angular-annotorious
In a browser:
Include the Annotorious plug-in and the directive on a page.
Basic with attribute
Basic with dynamic src
Basic with tag
Dynamic Query URLs
Do the image URLs change somehow between page load? (E.g. differences im the query string?) You can add a "data-original" attribute to the image. Annotorious will then use the value of this attribute as the identifier/src used to re-associate annotations with images.
Multiple with tag
For more information on how to setup and customise, check the examples.
Using the angular annotarious service
You may want for very good reasons to create annotations programmatically, or reset them all together. There is a very good angular service called 'annotoriousService' that helps you with that:
Assuming you have an image element that has a src attribute.
var photo = 0;
You could call:
If you want to reset/reload all annotations in the page:
If you want to set the design of the annotation:
All web applications define their flow/lifecycle. Therefore you may need to adapt the annotorious by calling the reset() method a bit more often.
Saving is done transparently assuming you created a storage provider that uses the annotorious plugin lifecycle.
The storage provider examples are under src/storage-providers/
There is one example that shows how to save and load annotations to/from the local browser storage. Just as the example, all providers are plug-in for annotorious
It should give you an idea how to do it for other type of storage providers.
If you happen to create another interesting storage provider, that ends up generic enough, you may consider/like to contribute it for the angular-annotorious community, your are very welcome.
Licensed under MIT license.