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

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.

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

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.

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