Let the user add colored rectangles over the proof image to highlight the products or price tags

[odin-h]

Problem

Finding the corresponding price from the list of price elements and the actual proof price in the image, can be time consuming when you want to verify the prices are correct on a lot of images at a time. Especially for images taken of entire shelves of products,

Proposed solution

Let the user drag a colored rectangle outline around the price tag and/or over the product on the image. Store the pixel coordinates for each corner of the rectangle in the site database. Make it possible to adjust the rectangle's perspective (don't lock the corners to 90°) in case the image was taken at an angel. Generate a virtual image crops of the rectangles in the browser that can be viewed separately from the original proof image. The colored rectangles could appear on the image when you hover or select the corresponding price element from the list below the full image.

Additional context

Having these coordinate points stored for rectangle bounding boxes around the price tags, could allow for focusing any future OCR or AI image recognition endeavors to only the interesting parts of the of the image.

Mockups

Part of