Press "Enter" to skip to content

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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *