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.
Be First to Comment