A interactive js library to draw bounding boxes with labels and descriptions for images. Demonstration can be found here.
Fetch BoundingBox.js library by placing these in your html document underneath the <head> tag
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script defer type="text/javascript" src="https://bounding-box-0xffffffff.herokuapp.com/boundingbox.js"></script>
<link rel="stylesheet" href="https://bounding-box-0xffffffff.herokuapp.com/boundingbox.css"/>Create a div to add the image in your html document underneath the <body> tag
<div id="myUniqueDivID"></div>Add an example code block that follows this in your .js file to use the library
const props = {
id: 'myUniqueDivID', // The div id to insert image
image: 'images/image.jpeg', // path of image to insert into div
width: '800', // width of image in pixels
height: '600', // height of image in pixels
displayLegend: true, // boolean flag to display or not display the legend
boundingBoxOnClick: true, // boolean flag to turn on or off the behavior when clicking on
boundingBoxes: [
{
coordinates: [
[0.2, 0.3],
[0.3, 0.4],
],
color: '#1B8C7F',
label: 'myLabel',
id: 'Unique ID :)',
content: 'Your first bounding box',
}
]
};
const boundingBoxAnnotate = new BoundingBoxAnnotate(props);
boundingBoxAnnotate.createBoundingBoxAnnotate();Initializes BoundingBoxAnnotate object
Fields in props
-
id: strThe div id in HTML document to insert image
-
image: strPath to image
-
width: intThe width of image in pixels
-
height: intThe height of image in pixels
-
displayLegend: booleanDisplays legend if
true, does not display legend iffalse -
boundingBoxOnClick: booleanEnables boundingBoxOnClick behavior if
true, disables boundingBoxOnClick behavior iffalse -
boundingBoxes: [BoundingBox]A list of
BoundingBoxobjects. Props forBoundingBoxtype explained below-
coordinates: [[lowerLeftX: float, lowerLeftY: float], [upperRightX: float, upperRightY: float]]Represents the coordinates of a bounding box. Make sure
lowerLeftX < upperRightX && lowerLeftY < upperRightYand values for each coordinate are values between[0, 1) -
color: strHtml accepted color code. Make sure
color:labelhave a 1:1 relationship. That is if there exists a boundingBox with label'label'and color'blue', subsequent bounding boxes with label'label'must have color'blue'and vice versa -
label: strLabel of Bounding Box. Make sure
label:colorhave a 1:1 relationship -
id: strThe unique if to identify the bounding box by
-
content: str | HTMLElementThe annotated content for the bounding box, can be plain text or user's custom component
-
A function to display and and hide legend
A function to turn on/off functionality for onclick on bounding boxes
A function to add a new bounding box to image
A function to delete a bounding box specified by it's id