0

I want to code an app to generate an Image Map.

It will scan an image and declare contiguous areas of the same colo(u)r to be parts of the same Image Map Area.

I can imagine saying that black is used for edges, to delineate areas, and navy is used for text, so should be ignored. Imagine a map of the USA, with the states outlined in black with states names in navy, and states colo(u)red in neither black nor navy.

Do you know of any library that would help with that? I prefer C/C++ or Python or Delphi, but will accept any language, just to see how it is done

Improve this question

2 Answers 2

Reset to default
1

Perhaps if we go back to your previous question: you have a coloured floor plan, which you have converted into an image map, and you now want to find which room the cursor is in. Rather than bothering with the intermediate image map, why not just use javascript to determine the colour of the pixel under the cursor at any time? You would then lookup this rgb value in a list of room colours.

Since you are choosing the colours of the floor plan, you can guarantee a different colour for each room. If necessary rooms of the same apparent colour can have slight rgb differences that will barely show. If the pixel under the cursor is black text, you can try a few pixels to either side.

Improve this answer
5
  • An excellent idea! BUT, I want customers to draw the floor-plan, which makes it difficult to restrict col(u)r selection. However, I can check for - as you say - " slight rgb differences ", and reject any such, when first parsing the image.
    – Mawg says reinstate Monica
    Feb 26, 2017 at 20:07
  • I am very tempted by this solution, as it seems very simple. However, I am not sure how well it will work with a lot of rooms – think of a large shopping mall, factory, hotel or office block. I think that the difference might be visible to the human eye.
    – Mawg says reinstate Monica
    Feb 27, 2017 at 15:11
  • 1
    You can use 2 images, one you present to the user, and a second one where you do the colour lookup. (You will need to have a separate canvas in javascript in any case). You could manually process this second image by flood-filling each area in a unique colour, whilst also creating the mapping of colour to area identification.
    – meuh
    Feb 27, 2017 at 17:14
  • Do you mean that I have a second image, but do not display it? Then when the user clicks on the displayed image at X, Y, I can call context.getImageData(X,Y, ...) for the second image?
    – Mawg says reinstate Monica
    Feb 27, 2017 at 20:23
  • Yes. Perhaps you could get your customers to start with the 2nd image as a base, then add their annotations and "prettier" colours to produce the first image.
    – meuh
    Feb 27, 2017 at 20:57
1

If you are willing to accept just simple rectangles, rather than complex polygons, in your image map, a possible path of investigation is to use ImageMagick to determine the size and location of a coloured area. For example, using the image in your previous question, and selecting the colour of the left-hand room as hex rgb value e97978, you can run

convert https://i.stack.imgur.com/fp5Ff.jpg -fill white +opaque '#e97978'  /tmp/out.png

to get just that room coloured on a white background: room

If you add the -trim option to the end you get the trimmed image:

trimmed room

which is the bounding box of the room, but if you use identify on the resulting image you not only have the size of this box (196x179), but also its top-left position (+111+53) in the original larger image:

$ identify /tmp/out.png
/tmp/out.png PNG 196x179 900x291+111+53  ...

So if you can colour each room differently, and preferably not use lossy jpg which dithers the colours, you might be closer to an automated algorithm.

Improve this answer
2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.