Easily Simple Image With Drag and Drop Annotations for the Web

DragDropAnnotate is a lightweight image annotation tool that makes it easy to add custom tags, captions, and hotspots to images by drag and drop.

Supports rectangular and image annotations. Drag-and-drop functionality based on the jQuery UI draggable widget.

More Features:

  • Quick annotations by drag and drop.
  • Annotate a photo with another picture or its bounding box.
  • Hint messages when mouse hover.
  • A pop-up window displaying descriptions and annotation tools.
  • Custom annotation styles.
  • The annotation is allowed to be edited, moved, rotated, and deleted with the mouse and touch.

How to make use of it:

1. Load the required jQuery and jQuery UI libraries within the doc.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>

2. Load the newest Font Awesome 5 iconic font for the drag, rotate, trash, and hit icons.

<link rel="stylesheet" href="/path/to/cdn/fontawesome/all.css" />

3. Download and load the DragDropAnnotate plugin’s files within the doc.

<link rel="stylesheet" href="./src/dragDropAnnotate.min.css" />
<script src="./src/dragDropAnnotate.min.js"></script>

4. Initialize the plugin in your picture and we’re able to go.

<img id="imageExample" src="example.jpg" />
var anno = $("#imageExample").annotable({
    // optional settings here
});

5. Add a customized annotation to the picture utilizing the addAnnotation(myAnnotation, annotationReplaced) technique.

<img id="imageExample" src="example.jpg" />
anno.addAnnotation({

  // Unique ID
  // OPTIONAL
  id: "1", 

  // path to the image annotation
  // OPTIONAL
  image: "http://www.example.com/myimage.jpg",

  // Description of the annotation
  text: "My annotation", 

  // "disabled", "noText", "full"
  editable: "noText", 

  // Position of the annotation
  position: {
    center: { x: 0, y: 0 } 
  },

  // Rotation of the annotation with respect to the x-axis (degrees).
  // OPTIONAL
  rotation: 0, 

  // Width/height of the annotation
  // OPTIONAL
  width: 123, 
  height: 123 

});

6. Or create customized annotations you can place on the pictures by way of drag and drop.

<h2>Drag and Drop an annotation to Annotate</h2>

<div class="draggable-annotation" 
     annotation-text="Rectangle Annotation" 
     annotation-width="200" 
     annotation-height="400" 
     annotation-rotation="0"
     annotation-id="1"
     annotation-editable="full">
     Rectangle Annotation
</div>

<img class="annotation" 
     src="2.jpg" 
     annotation-text="Image Annotation"
/>

7. Override the default CSS choice of draggable annotations.

var anno = $("#imageExample").annotable({
    "draggable": ".draggable-annotation"
});

8. Customize the hint.

var anno = $("#imageExample").annotable({
    "hint": { 
      "enabled": true,
      "message": "Drag and Drop to Annotate", 
      "icon": '<i class="far fa-question-circle"></i>', 
      "messageMove": "Move to set new annotation position",
      "iconMove": '<i class="fas fa-info"></i>', 
      "messageRotate": "Move to set new annotation rotation",
      "iconRotate": '<i class="fas fa-info"></i>', 
    },
});

9. Customize the popup window.

var anno = $("#imageExample").annotable({
    "popup": { 
      "buttonMove": '<i class="fas fa-arrows-alt"></i>',
      "tooltipMove": "Change the position of annotation",
      "buttonRotate": '<i class="fas fa-sync-alt"></i>', 
      "tooltipRotate": "Change the rotation of annotation", 
      "buttonRemove": '<i class="fas fa-trash"></i>', 
      "tooltipRemove": "Remove the annotation",
      "tooltipText": "Text of annotation"
    },
});

10. Customize the annotation styles.

var anno = $("#imageExample").annotable({
    "annotationStyle": { 
      "borderColor": '#ffffff', 
      "borderSize": 2, 
      "hiBorderColor": '#fff000',
      "hiBorderSize": 2.2,    
      "imageBorder": true
    }
});

11. Publish strategies.

// Returns an array of annotations.
ano.getAnnotations();

// Removes an annotation.
ano.removeAnnotation(annotation)

// Removes all annotations or removes specific annotation
ano.removeAll(id)

// Hides all annotations
ano.hideAnnotations();
Hides existing annotations.

// SHows annotations
ano.showAnnotations();

// Highlights an annotation
ano.highlightAnnotation(id);

12. Event handlers.

ano.on('onAnnotationCreated', function (event, annotation) {
  console.log(annotation);
});

ano.on('onAnnotationUpdated', function (event, annotation) {
  console.log(annotation);
});

ano.on('onAnnotationRemoved', function (event, annotation) {
  console.log(annotation);
});

ano.on('onMouseMoveOverItem', function (event, coordinate) {
  console.log(coordinate);
});

Draggable Image Annotation Plugin, DragDrop Annotat Github


See Demo And Download

Official Website(AntoninoBonanno): Click Here

This superior jQuery/javascript plugin is developed by AntoninoBonanno. For extra Advanced usage, please go to the official website.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Nepali-Date-Picker-jQuery-Plugin

Nepali Date Picker jQuery Plugin | nepaliDatePicker

Nepali Date Picker is a customizable, easy-to-use, and input-based date picker plugin mostly based on the Nepali calendar. Users can choose a Nepali date in the navigable…