Getting all polygon coordinates of specific area of image? [closed]

Question

I have an image were I put links and text with html image map. That works fine. I would like to have some hover effect on specific areas of the image. For example take a world map and when you hover over a country that one get highlighted. With the html image map and some css it is not a problem, that is, if you have a list of all polygon coordinates of all countries.

So how do I get those? You cant possibly do that manually.

I am not a photoshop expert but I imagine you would do a "magic wand" selection on an area and then somehow list the coordinates that is used to create the selection. Is there such functionality?

I personally use Paint.Net for simple image editing and it does not have that feature that I know of.

Do you know the way to do this?

Answer 1

I'll tell you how to do it with JavaScript, since this is a programming Q/A site.

To get the rectangular coordinates of the selection bounds is easiest:

#target photoshop

// Save the current unit preferences (optional)
var startRulerUnits = app.preferences.rulerUnits
var startTypeUnits = app.preferences.typeUnits



// Set units to PIXELS
app.preferences.rulerUnits = Units.PIXELS
app.preferences.typeUnits = TypeUnits.PIXELS

// Use the top-most document
var doc = app.activeDocument; 

var coords = doc.selection.bounds;

// Write coords to textfile on the desktop. Thanks krasatos
var f = File( '~/Desktop/coords.txt' );
f.open( 'w' );
f.write( coords );
f.close();



// Reset to previous unit prefs (optional)
app.preferences.rulerUnits = startRulerUnits;
app.preferences.typeUnits = startTypeUnits;

This will give the rectangular bounds (think of the bounding box you see when transforming) of the selection in the current active document. It outputs in the order minX, minY, maxX, maxY. This should be enough info to translate to CSS coordinates.

To get the coordinates of individual polygon points you can make the selection into a path and output each pathPoint.anchor on the path using this script:

#target photoshop

// Save the current unit preferences (optional)
var startRulerUnits = app.preferences.rulerUnits
var startTypeUnits = app.preferences.typeUnits



// Set units to PIXELS
app.preferences.rulerUnits = Units.PIXELS
app.preferences.typeUnits = TypeUnits.PIXELS

// Use the top-most document
var doc = app.activeDocument; 

// Turn the selection into a work path and give it reference
doc.selection.makeWorkPath();
var wPath = doc.pathItems['Work Path'];

// This will be a string with the final output coordinates
var coords = '';

// Loop through all path points and add their anchor coordinates to the output text
for (var i=0; i<wPath.subPathItems[0].pathPoints.length; i++) {
        coords += wPath.subPathItems[0].pathPoints[i].anchor + "\n";
}


// Write coords to textfile on the desktop. Thanks krasatos
var f = File( '~/Desktop/coords.txt' );
f.open( 'w' );
f.write( coords );
f.close();


// Remove the work path
wPath.remove();




// Reset to previous unit prefs (optional)
app.preferences.rulerUnits = startRulerUnits;
app.preferences.typeUnits = startTypeUnits;

Instructions:

-open your map image

-make a selection of the region using your favorite selection tool

-run the script with the extendscript toolkit or by choosing File>Scripts>Browse... and select the .jsx file where the script is saved.