jQuery Adapter

The jQuery adapter adds an .annotateImage() method to jQuery objects, providing a familiar API for jQuery-based projects.

CDN
HTML 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://unpkg.com/annotate-image@2.0.0/dist/jquery.min.js"></script>
npm
Bash 
npm install annotate-image jquery
JavaScript 
import 'annotate-image/jquery';
import 'annotate-image/css';

Usage

JavaScript 
$(window).on('load', function() {
  $('#my-image').annotateImage({
    editable: true,
    notes: [
      { top: 28, left: 117, width: 164, height: 553,
        text: "Cypress tree", id: "note-1", editable: true },
      { top: 109, left: 338, width: 274, height: 266,
        text: "Swirl in the sky", id: "note-2", editable: false }
    ]
  });

  // Destroy
  $('#my-image').annotateImage('destroy');
});

Live Demo

Starry Night