Wanted: Javascript library to draw boxes on top of image for detected objects

Community Help
1

Any Javascript libraries out there that can draw boxes on top of an image (with JavaScript canvas?) for embedding in a website? Ideally based on a “standard” like using coco json as input format.

2

Yeh absolutely. Are you using roboflow.js to get your predictions or the hosted API?

3

I am using the hosted API. I am looking for a way to overlay the predictions from the JSON file on top of an image. Before starting to tackle that myself, I was wondering whether such thing already exists.

Potential features:

  • Hovering an area of the image shows the bounding box + label.
  • Hovering anywhere on image shows all bounding boxes and labels.
  • The image is shown with all the bounding boxes by default, on hover a label shows.
  • When the image is scaled, the bounding boxes need to be scaled accordingly.
  • Instead of using HTML to render the bounding boxes and labels, this is being done by JavaScript canvas, allowing the overlay to be downloaded as PNG.
  • Etc.
4

We have code available for drawing the box from the Inference API’s JSON output:

Here is our GitHub repo direct link for more JavaScript snippets: roboflow-api-snippets/Javascript at main · roboflow-ai/roboflow-api-snippets · GitHub

And more background on roboflow.js:

To scale the bounding boxes with the images, you’d need to ensure the window/canvas the image is in has “tracked” variables for the image’s width and height dimensions, so that you can upscale/downscale the position coordinates of the bounding box predictions accordingly.

A quick way to accomplish your goal would be to try plotting the images with Plotly JS? Plotly javascript graphing library in JavaScript