We are looking to create a simple one-page application that tags photos using a bounding box on a HTML5 canvas.
We require a list of photos, so the user can easily and quickly navigate to a specific image. Once the image has been selected the image loads on the right-hand side of the screen.
The user can then draw a bounding box around any section within the image. Upon release of the mouse an input box will appear alongside the bounding box and allow them to either create a new tag, select an existing tag (recently used) or use a dropdown box (with search).
The user can draw as many bounding boxes as they like on the image. Once they are done with the tagging of that image, they then press the Next button to move to the next image in the list.
Users can navigate back to an image using the list on the left or by navigating using the Next & Previous buttons on the page. This will then load the existing annotations onto the image.
A basic C# project has been set up with basic methods for saving / loading the annotations and image tag lists have been created.
No database connection is required at this time, as we are only persisting in memory.