jQuery plugin to annotate images

For the past months, we have been using a workflow to communicate layout changes on the site that includes an in-browser screen capture, followed by a screenshot annotate step and concluded by a todo item in the backend database.

After some clean-up and in accord with DjaoDjin's values, we are releasing the code of the javascript annotation tool on github as djaodjin-annotate.

djaodjin-annotate is a lightweight jquery plug-in to add simple shapes (rectangles and arrows) and text over an image (Demo).

Live Demo

(UPDATED Wed, 23rd Dec 2015)

Choose a shape tool (rectangle, arrow or text) and start to annotate.

How to use the code in your HTML pages?

1. Add a div into the HTML DOM

<div id="myCanvas"></div>

2. load djaodjin-annotate.js

<script type="text/javascript" src="/static/js/djaodjin-annotate.js"></script>

3. Wrap your canvas with the annotate plugin

$(document).ready(function(){
  $('#myCanvas').annotate(options);
});

Customizable options:

options = {
  width: "640",          // Width of canvas
  height: "400",         // Height of canvas
  color:"red",           // Color for shape and text
  type : "rectangle",    // default shape: can be "rectangle", "arrow" or "text"
  images: null,          // Array of images path : ["images/image1.png", "images/image2.png"]
  linewidth:2,           // Line width for rectangle and arrow shapes
  fontsize:"20px",       // font size for text
  bootstrap: true,       // Bootstrap theme design
  position: "top",       // Position of toolbar (available only with bootstrap)
  selectEvent: "change", // listened event on .annotate-image-select selector to select active images
  unselectTool: false,   // Add a unselect tool button in toolbar (useful in mobile to enable zoom/scroll)
}

Destroy an annotate

Once initialized, it can be destroy:

$("#myCanvas").annotate("destroy");

Add image to existing annotate

It's also possible to provide new images by pushing them:

$("#myCanvas").annotate("push", "images/test_2.jpg");

Events

• annotate-image-added: Fired when images provided in option are initialized or when a new image is pushed. Can be used to append new image selector.
• If multiple images provided, an image selector is necessary to switch. Image selector must trigger an event on annotate-image-select class. you can custom the event by using selectEvent option (default: change) and custom the readable image attribute by using idAttribute option (default: id)