A bounding box annotation tool written in CoffeeScript/JavaScript. There is an online demo at https://kyamagu.github.io/bbox-annotator/demo.html
bbox_annotator.coffee Main code.
demo.html Example to host on a private server.
mturk.html Example to use in Amazon MTurk.
README.md This documentation.
Be sure to unescape × with × when directly editing an MTurk template on
the Amazon requester UI.
Compile the coffee script to get a javascript.
coffee -c bbox_annotator.coffee
Or, go to http://coffeescript.org/ and compile the coffeescript.
Load the compiled javascript codes inside HTML.
<script src="bbox_annotator.js" type="text/javascript"></script>
Embed a block element for annotation tool and a form element in HTML.
<div id="bbox_annotator"></div>
<input id="annotation_data" name="annotation_data" type="hidden" />
Then, attach a piece of script to launch the annotation tool. The annotator takes a callback function on change of the annotation data. Use JSON format to display the value.
<script type="text/javascript">
$(document).ready(function() {
var editor = new BBoxAnnotator({
url: "/url/to/image.jpg",
onchange: function(annotation) {
$("#annotation_data").val(JSON.stringify(annotation));
}
});
});
</script>
The returned annotation is an array of objects. Here is an example.
[
{
"top": 0,
"left": 0,
"width": 100,
"height": 100,
"label", "object"
}
]
Check the attached demo.html and mturk.html for how to use.
The BBoxAnnotator object takes options to change its behavior.
id: CSS selector for the annotator element. Default is"#bbox_annotator".input_method: One of the "text", "select", and "fixed". This will change how to input associated annotation text.labels: A string, or an array of strings. Set of labels used for suggestion in "text" or "select" input. When fixed, only the first element is chosen.width: Width of the image. The default is the original width of the image.height: Height of the image. The default is the original height of the image.show_label: Flag to display a label in the box. Default is true for "text" and "select" input, and false for "fixed" input.border_width: Size of border around the image. Default is 2. Leaving it 0 can make it hard to start annotation around the image border.multiple: Defines if multiple boxes could be selected. Default istrue.guide: Enable vertical and horizontal guide lines. Specifytrue, or object that specifies color like{'color': '#fff'}.
The code may be redistributed under BSD license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent