如何获取用于图像映射的形状的路径坐标？

Question

我正在使用ImageMapster from here制作图片地图。

我创建了一个photoshop图像，其中包含了我从原始照片中剪下的几张图像。每张图片都在一个单独的图层上。

现在，我需要获取每个对象的路径坐标，我不想将鼠标悬停在每个角落上并手动记下每个坐标。

是否有自动获取此路径的方式？

也许有一些应用程序或网络服务，我可以发送我的图像并获得回报路径吗？

我尝试分别导出每个图层，然后将它们导入到插图画家中并对图形进行矢量化（它将形状保持在原始位置），但我无法弄清楚如何将坐标路径作为文本。我可以将它导出到svg，但这不是css图像映射所需的简单代码。

Answer 1

啊！在谷歌搜索image-map之后，非常感谢Sven的想法（他获得了+1），我找到了this thread here on Stack Overflow。

所以这是我的过程。

1. 在Photoshop中准备图像，将每个对象放在具有透明背景的单独图层上（这样可以在您进行跟踪时轻松​​实现）。
2. 保存您的photoshop文件。
3. 使用文件...打开（在CS4和CS5中工作）在Illustrator中打开Photoshop文件，并确保允许该选项将Photoshop的图层导入为单独的对象。打开文件后，请确保不要移动任何对象 - 您需要它们位于与完全相同的位置，因为它们可以在渲染时相互叠加imagemap。
4. 将Live Trace与自定义设置一起使用。使用黑色＆amp;白色模式，阈值全部向上（255）。这将产生形状的黑色轮廓。 （您也可以使用“忽略白色”）。按下Trace按钮。如果你有很多图层，你可以将这个新的跟踪模式保存为预设 - 我称之为我的 Silhouette 。现在，我只需点击一个图层，然后从跟踪按钮的下拉菜单中选择 Silhouette 。
5. 展开形状并确保它只包含一个扁平形状：
   • 您可以使用插图画家中的blob画笔遮挡任何不需要的白色区域
   • 没有群组
   • 没有复合形状（或者它不起作用） - 这意味着你无法创建切口。
   • 当您点击它们时，您可以看出形状是正确的 - 您应该能够看到路径本身没有涉及“其他”形状（可能是blob画笔添加） - 只是一条路径。一个简单的方法是：
     • select形状
     • ungroup如有必要
     • release compound path
     • unite（形状模式将所有形状合并为一个）
   • 不要crop您的图片 - 您希望自己的形状与原始photoshop图片中的图像区域位于同一位置。
   • 不要将所有形状加在一起。
   • 形状应该都是单独的整体形状，都在它们的原始位置，每个都在一个单独的层上。
6. 现在，打开Illustrator的Attributes panel，并确保“显示选项”。
7. 选择您的形状，然后在“参数”面板中，将“图像映射”组合框从None切换为Polygon。确保添加一个url（你输入的内容无关紧要;你可以稍后更改它 - 我只需要输入“＃”和形状的名称，这样我就可以在图像映射代码中告诉它属于哪一个）{ {0}}
8. 为每个对象执行此操作。
9. 现在，在File菜单中，转到“另存为Web和设备”。在此处跳过所有设置，然后按“保存”。
10. 在“另存为”（窗口标题为“保存优化为”）对话框中，使用“另存为类型：”并选择HTML Only(*.html)如果您只想要代码，或{{1如果你想要sillouhuette（它们将出现在一个名为“images”的文件夹中） - 并记下你的保存位置。
11. 现在在记事本中打开那个html文件！
12. Voila！所有形状都将作为预先制作的HTML and Images - 点路径甚至HTML代码呈现给您。这是你在记事本中打开刚创建的html文件时的样子：对于这个演示，我选择了一个特别复杂的图像 - 一个你不想手工估计的图像，也不必做两次！

不要忘记将实际图像文件放在网站图像文件夹中的某个位置。您可以保存psd文件以供日后使用，并根据需要添加更多“内容”，然后重复此过程。

我能够在短短几分钟内以这种方式为我的photoshop图片创建图像映射。在你做了一次之后，下次会更容易。

Answer 2

这已经困扰了我很久了，我没有Illustrator能够使用BGM提出的解决方案，我创建了自己的Photoshop插件。

您可以在此处获取：https://creative.adobe.com/addons/products/2389

它将所有路径的“点”坐标写入文本文件。 应该适用于CS6及以上版本。

我使用它的方式是创建一个选取框，右键单击 - ＆gt;制作工作路径，重命名我的路径，[重复]，然后通过我的插件导出coords。

如果有人对它背后的脚本感兴趣，你可以看一下：http://pastebin.com/8ugcAV3j

如果您进行了任何改进，请在此处发布，以便其他人也可以使用它们。

希望这有助于某人。

编辑：添加了源脚本的链接（仅在之前的评论中）

Answer 3

我用它来查找形状轮廓的坐标，以便在Dreamweaver中为链接创建图像热点。如果你有其他想法，那么你将不得不忽略其中一些。这适用于单个图层，因此您可能希望首先制作“扁平化副本”，但我不明白为什么它不适用于多层图像。

使用魔杖突出显示您想要的区域。对于不同的图像，这将是不同的。 右键单击并点击Make Work Path。使用通过反复试验找到的合适的容差。我只是使用最敏感的。 对所有图像中的所有区域执行此操作，为每个图像创建单独的路径。 单击编辑，然后将路径导出到插图画家并将文件保存在合理的位置。 用word打开保存的文件。忽略顶部的bumf并使用replace来删除所有字母。不要担心段落字符。 请注意，所有工作路径都导出在由空行分隔的同一文件中，因此必须单独复制和粘贴以用于每个热点。

插入图片后。使用几个坐标开始在Dreamweaver中制作地图，然后在插图文件中为每个要生成的地图区域中的信息替换这些地图。

Answer 4

我添加了我必须找到的更新答案，因为adobe在很多情况下已经消除了HTML输出，我主要使用photoshop（CS4），这是一个完美的解决方案：

1）下载以下文件：https://github.com/andyhawkes/ps-paths-to-imagemap

2）在Photoshop中打开你的图像，然后用魔杖选择表格

3）右键单击并选择“make work path”（px越小，越准确）

4）转到File - ＆gt; Scripts - ＆gt; Browse ...并从第一步中选择脚本

就是这样!!这个脚本将用坐标打开你的texteditor ......

Answer 5

这样的事情可能有用;

http://code.google.com/p/imagemap/

将图像复制到位，然后绘图。

Answer 6

创建图像映射非常简单。 首先，我们需要查看代码的语法 让我们创建一个div。如果我们想将它放在页面的右侧，我们可以从写作开始

<div align="right">

之后，我们导入我们要映射的图像。

<img src="" alt="" width="" height="" usemap="#nameofmap" />

现在我们必须定义地图结构。首先假设您希望图像的矩形部分像超链接一样。

<map name="nameofmap">
<area href="wherever I wanna take that.com" alt="" title="" 
shape=rect coords="A,B,C,D"></map>

现在我们关闭div。

</div>

如果形状是圆形，我们使用语法 shape = circle coords =“x，y，radius”

如果形状是多边形，我们使用 ** shape = poly coords =“a，b，c，d，e，f，gh”

现在出现了很大的一部分：如何找到图像地图坐标。 很简单。去吧     http://www.image-maps.com 浏览图像文件，单击“开始映射图像”，然后继续，然后在下一页上，单击右侧的“导入旧映射代码”。然后获取坐标。

之后，您可以使用FIREBUG根据您的规格更改坐标，因为图像贴图仅对整个图像进行超链接，因此请使用firebug更改坐标并根据您的要求进行调整。

玩得开心。