Image processing - define selections from a source image

Question

I have, as an example, the following two images:

http://img571.imageshack.us/i/spain.jpg/
http://img97.imageshack.us/i/spainoverlay.png/

I want to load the second and detect the transparent areas for use as selections to which I can apply some processing, but I don't have the first clue how to start. I'm familiar with loading images and drawing shapes and text on them, but that's about it.

How do I go about doing some kind of "magic wand" detection on the transparent areas to obtain some array of points or other definition of the area for manipulation?

Edit: In the second image, the white areas are actually the transparent areas. They show up white thanks to imageshack's background color.

Answer 1

You can get check whether a pixel is transparent by checking its alpha value (0 is fully transparent, 255 is fully opaque) with Bitmap.GetPixel(), if Bitmap objects are what you're using to load images into.

If you just need to do something with each transparent pixel, I guess there's no need to create a selection in a separate object. Just iterate through the pixels, if one is transparent do what you have to do.

If you do need to create a selection, then you can use a separate 1 bit-per-pixel bitmap of the same size as your original image. White represents the selected area, black not selected (or opposite, your choice).

See: http://msdn.microsoft.com/en-us/library/system.drawing.bitmap.aspx

Answer 2

This would seem like a simple problem of only displaying the full map image, and mapping the cursor coordinate when moved over that image to the corresponding coordinate of the mask image. You could do two things here. Keep the mask image black and white, and have a map of each area associated to something that defines what you want to do when that area is hovered. Or, change your mask to a multi-colored image, and simply map each color code to something that defines what you want to do when that area is hovered. I personally would choose the latter, as it is a lot simpler, and you would have approximately 16 million possible zones that could be used (given 24 bit colors).

Given a simple mapping type:

class ZoneMap
{
    public Color MappedColor { get; set; }
    public Action OnHover { get; set; }
}

You could look up the mapped zone by translating the mouse coordinates of the source image to the corresponding coordinates of the multi-color zone map image, look up the ZoneMap entry by color, and invoke its OnHover action:

var spainZones = new ZoneMap[]
{
    new ZoneMap { MappedColor = Color.Red, OnHover = new Action(RedHandler) },
    new ZoneMap { MappedColor = Color.Blue, OnHover = new Action(BlueHandler) }
}

var color = getZoneColor(Mouse.X, Mouse.Y); // translate source mouse coords to colored zone map coords and get color
var zone = spainZones.FirstOrDefault(zm => zm.MappedColor == color);

zone.OnHover();

I know this is very rough. If I had more information about what you want to do on hover of a particular zone, I might be able to provide more.