How to display Bounding Boxes on Images with JavaScript

In this tutorial, you will learn how to display bounding boxes on images with Javascript in 5 minutes. Eden AI provides an easy and developer-friendly API that allows you to enclose an object in an image.

‍

What are bounding boxes?

Bounding boxes are rectangles that include an object or area of interest in an image. They are important for tasks like detecting objects, segmenting images, and other computer vision applications. To show bounding boxes on images, you will use the draw() function on the canvas object. This function requires a list of points that match the four corners of the rectangle.

In object detection, the box used to locate an object is typically linked to extra details, such as the object's category and, occasionally, a certainty rating indicating the model's belief in the accuracy of the detection. Boxes are critical for recognizing and categorizing objects in images, allowing computers to comprehend and interpret visual data.

‍

‍

How to display bounding boxes with JavaScript

‍

Step 1. Obtain your Eden AI API Key

To get started with the Eden AI API, you need to sign up for an account on the Eden AI platform. Once registered, you will get an API key which you can use to call the different endpoints of the Eden AI API.

‍

Step 2. Display Bounding Boxes using drawPoints() method

First, create a canvas that matches the image's dimensions. Then place the image on the canvas and develop a point list to identify a bounding box that encloses the entire image. Finally, the drawPoints() technique is used to indicate the bounding box on the canvas.

Here is an example code snippet:

Step 3. Display bounding boxes using drawRect() method 

Sometimes, you won't have fixed coordinates for all four corners of the bounding box. Then, you can use object detection data that provides the center coordinates, width, and height of the box.

To draw the bounding boxes using this data, you will use the canvas object's drawRect() method. This method uses input parameters, such as the top-left corner coordinates of the rectangle, width and height.

First, create a canvas with the same size as the image and draw the image on it. Then apply the detections array and use the drawRect() method to show each bounding box on the canvas.

Here is an example code snippet:

‍

Use cases for using bounding boxes on Images

Bounding boxes are commonly used in computer vision and image processing for various purposes. Here are several use cases for using bounding boxes on images:

‍

1. Object Detection

Identifying and finding items within an image is a basic use case. Boxes are drawn around the identified objects to indicate their existence and give details about their location.

‍

2. Image Classification

Sometimes, image classification tasks utilize bounding boxes. This enables identification and categorization of various objects in the image instead of assigning only one label to the complete image.

‍

3. Augmented Reality

In AR apps, boxes can be used to attach virtual objects or notes to particular parts of the real world recorded by the camera.

‍

4. Image Annotation

Bounding boxes are used for manual or automated image annotation. Annotators can draw bounding boxes around objects of interest to create labeled datasets for training machine learning models.

‍

Conclusion

This tutorial offers a streamlined approach to integrating bounding boxes into images using JavaScript. You can do this by using the Canvas object's drawPoints() or drawRect() methods. These methods enable you to present the results of object detection or visually support other computer vision tasks. 

By highlighting the importance of bounding boxes in computer vision and presenting practical code examples, developers can acquire a useful skill set for various tasks, from detecting objects to annotating images

‍

‍