1.0.7 • Public • Published

    Angular Annotorious

    Angular Annotorious is directive for the image annotation library Annotorious plugin.


    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 )


    Via Bower:

    bower install angular-annotorious

    Via npm:

    npm install angular-annotorious

    In a browser:

    <link rel="stylesheet" type="text/css" href="" media="screen" />
    <script src=""></script>
    <script src="angular-annotorious.js"></script>

    Getting Started

    Include the Annotorious plug-in and the directive on a page.

    Basic with attribute

    <img src="" annotorious-annotate>

    Basic with dynamic src

    <img ng-src="{{imgURL}}" annotorious-annotate>

    Basic with tag

    <img id="anno1" src="">
    <annotorious options="{annotationsFor:'#anno1'}" />

    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.

    <img  src="http://any.long.url/that-could-change.jpg?foo=randomtoken" 

    Multiple with tag

    <img class="group" src="">
    <img class="group" src="">
    <annotorious options="{annotationsFor:'.group'}" />

    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 = jQuery(document).find(".your-image")[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:

                outline: '#00f',
                stroke: '#ff0000',
                fill: 'rgba(255, 0, 0, 0.3)',
                'hi_stroke': '#00ff00',
                'hi_fill': 'rgba(0, 255, 0, 0.3)'

    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.

    Storage providers

    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.


    npm i angular-annotorious

    DownloadsWeekly Downloads






    Last publish


    • igorlino