Image Annotate

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/dist/css/annotate.min.css">
<script src="https://unpkg.com/annotate-image@2.0.0/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/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/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>