How to ensure the selection of objects from the image?

Question

JavaScript

There are many images like .
It is necessary, on the web page, to give the opportunity to select elements (47-53 in the picture) with the mouse.
Images are not processed, from scanned, black and white.
There is only one option so far:
Manually determine the coordinates of object polygons and work with them.
But "manually" - not happy.

Answer 1

To be honest, trying to parse the image into pieces using algorithms is too stupid an idea, because it will take a lot of time to write code, especially to parse special cases, and the arrows in the picture are out of topic - they will interfere with parsing the image. I suggest a compromise: write a JavaScript module for rough manual arrangement of areas in the picture (for example, a canvas is placed on top of the picture, and you draw rectangles on it, which will be sub-objects). After completing the work:
1) you will work with the same picture, i.e. qualitatively it does not change, is not divided into several, etc.;
2) you implement map-area areas whose coordinates will be based on your markup, incl. as an instant preview;
3) you do not work with complex products (including proprietary ones), and do not run along the chain like "photoshop" - "explorer" - "browser".
So that you can estimate the time of writing, I say that it took me 2 days to write this thing:

But its main purpose is to draw different shapes, and you only have rectangles (and possibly ovals), so with enough skill for deal with the day.
Of course, if the amount of work is huge, then this is not a proposal, but for a few dozen images it will do.

Answer 2

Dig in the direction of similar algorithms - www.gcmsite.ru/?pg=art&id=delphi-yandex-cy
It remains to consider the position of the number in the picture.
I do not claim the usefulness of my answer. It just got interesting.