annotate-image

A JavaScript image annotation library that creates Flickr-like comment annotations on images. Users can draw rectangular regions, add text notes, and persist annotations via callbacks or AJAX.

Works standalone (vanilla JS), or with jQuery, React, or Vue. Framework adapters are tree-shakeable — only the one you import gets bundled.

Installation

npm

Bash

npm install annotate-image

Peer dependencies are optional — install only what you need:

Bash

# For jQuery adapter
          npm install jquery

          # For React adapter
          npm install react react-dom

          # For Vue adapter
          npm install vue

CDN

HTML

<link rel="stylesheet" href="https://unpkg.com/annotate-image@2.0.0-beta.3/dist/css/annotate.min.css">
            <script src="https://unpkg.com/annotate-image@2.0.0-beta.3/dist/core.min.js"></script>

ES Modules

JavaScript

import { annotate } from 'annotate-image';

Quick Start

Include the CSS and JavaScript from the CDN, then call AnnotateImage.annotate() on an image element:

HTML

<!DOCTYPE html>
              <html>
              <head>
              <link rel="stylesheet"
              href="https://unpkg.com/annotate-image@2.0.0-beta.3/dist/css/annotate.min.css">
              </head>
              <body>
              <img id="my-image" src="photo.jpg" width="800" height="600">

              <script src="https://unpkg.com/annotate-image@2.0.0-beta.3/dist/core.min.js"></script>
              <script>
              var img = document.getElementById('my-image');

              AnnotateImage.annotate(img, {
              editable: true,
              notes: [
              { top: 50, left: 100, width: 200, height: 150,
              text: "An interesting region", id: "note-1", editable: true }
              ]
              });
              </script>
              </body>
              </html>

Live Demo

Click and drag on the image below to create a new annotation, or hover over the existing annotations to view their notes. This demo is running the library directly from the CDN.