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