Html 获取图像特定区域的所有多边形坐标?

Html 获取图像特定区域的所有多边形坐标?,html,css,image,photoshop,paint,Html,Css,Image,Photoshop,Paint,我有一个图像,我把链接和文本与html图像映射。那很好。我想在图像的特定区域有一些悬停效果。例如,以世界地图为例,当您将鼠标悬停在某个国家上方时,该国家会高亮显示。对于html图像地图和一些css,这不是一个问题,也就是说,如果您有一个所有国家的所有多边形坐标的列表 那我怎么得到这些呢?你不可能手工做那件事 我不是photoshop专家,但我想象你会在一个区域上做一个魔杖选择,然后以某种方式列出用于创建选择的坐标。有这样的功能吗 我个人使用Paint.Net进行简单的图像编辑,它没有我所知道的功

我有一个图像,我把链接和文本与html图像映射。那很好。我想在图像的特定区域有一些悬停效果。例如,以世界地图为例,当您将鼠标悬停在某个国家上方时,该国家会高亮显示。对于html图像地图和一些css,这不是一个问题,也就是说,如果您有一个所有国家的所有多边形坐标的列表

那我怎么得到这些呢?你不可能手工做那件事

我不是photoshop专家,但我想象你会在一个区域上做一个魔杖选择,然后以某种方式列出用于创建选择的坐标。有这样的功能吗

我个人使用Paint.Net进行简单的图像编辑,它没有我所知道的功能


你知道怎么做吗?

ps中没有任何选项,你必须在Dreamweaver中创建坐标。

我将告诉你如何使用JavaScript,因为这是一个编程问答网站

要获取选择边界的直角坐标,最简单的方法是:

#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;
这将使矩形边界与变换当前活动文档中的选择时看到的边界框相同。它以minX、minY、maxX、maxY的顺序输出。这应该是足够的信息转换为CSS坐标

要获取各个多边形点的坐标,可以选择路径并使用以下脚本在路径上输出每个pathPoint.anchor:

#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;
说明:

-打开地图图像

-使用您喜爱的选择工具选择区域


-使用extendscript工具包或通过选择文件>脚本>浏览运行脚本。。。然后选择保存脚本的.jsx文件。

问得好,+请投我的票。你想要类似的吗?我会考虑使用Java或jQuery之类的东西。也许你可以看看。我不知道这是否会有帮助,但这是有意义的。很抱歉发布了一个新的答案,但我似乎无法对你的帖子发表评论。您能解释一下如何修改代码,使其将坐标列表写入文本文件吗?我似乎无法从photoshop thanx nvm中的警报中复制它们,我想出来了:在alertcoords行var f=文件“~/Desktop/test/coords.txt”之后添加了这个;f、 打开“w”;f、 写坐标;f、 接近;如果帖子不合适,请随意删除。是的,忘了提醒是不可复制/复制的,对不起。您的方法可以工作,或者您也可以使用$.WriteWord将其输出到ExtendScript控制台。