Vereonix Vereonix - 17 days ago 7
ASP.NET (C#) Question

Get the 2D coordinate outline of a region of an image (such as a country on a map)

How would I go about generating the 2D coordinates for an area of an image, so for example if one of the countries on this map was singled out and was the only one visible: image1 but on a canvas the same size, how would I go about getting the 2D coordinates for it?

As I then want to create hover/click areas based on these coordinates using c#, I'm unable to find a tool which can detect for example a shape within a blank canvas and spit out its outline coordinates.

I mainly believe this to be a phrasing/terminology issue on my part, as I feel this whole process is already a "thing", and well documented.

Answer Source

There are many ways to achieve your task here are few:

Look at Generating Polygons from Image (Filled Shapes) which is Almost duplicate of yours but has a bit different start point.

In a nutshell:

  1. extract all non white pixels which are neighboring white pixel

    Just loop through whole image (except outer border pixels) if processed pixel is not white then look to its 4/8 neighbors of processed pixel. If any of them is different color then add the processed pixel color and coordinates to a list.

  2. sort the point list by color

    This will separate countries

  3. apply closed loop / connectivity analysis

    This is vectorisation/polygonize process. Just join not yet used neighboring pixels from list to form lines ...

There is also A* alternative for this that might be easier to implement:

  1. extract all non white pixels which are neighboring white pixel

    Just loop through whole image (except outer border pixels) if processed pixel is not white then look to its 4/8 neighbors of processed pixel. If none of them is different color then clear current pixel with some unused color (black).

  2. recolor all white and the clear color to single color (black).

    from this the recolor color will mean wall

  3. Apply A* path finding

    find first non wall pixel and apply A* like growth filling. When you done filling then just trace back remembering the order of points in a list as a polygon. Optionally joining straight line pixels to single line ...

Another option is adapt this Finding holes in 2d point sets

[notes]

If your image is filtered (Antialiasing,scaling,etc) then you need to do the color comparisons with some margin for error and may be even port to HSV (depends on the level of color distortion).