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

Question

我正在使用 ImageMapster from here 创建图像映射。

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

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

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

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

我尝试单独导出每一层，然后将它们导入到 illustrator 中并对形状进行矢量化（它将形状保持在其原始位置），但我不知道如何将坐标路径作为文本获取。我可以将其导出为 svg，但这与 css 图像映射所需的简单代码不同。

Answer 1

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

这是我的过程。

1. 在 Photoshop 中准备图像，将每个对象放在具有透明背景的单独图层上（这样可以方便您进行描摹）。
2. 保存您的 Photoshop 文件。
3. 在 Illustrator 中使用 File...Open 打开 Photoshop 文件（适用于 CS4 和 CS5），并确保允许选择将 Photoshop 的图层作为单独的对象导入。打开文件后，请确保不要移动任何对象 - 您需要将它们与在 photoshop 文件中的完全相同的位置，以便它们在渲染时可以相互叠加图像地图。
4. 使用带有自定义设置的Live Trace。使用阈值全部向上 (255) 的黑白模式。这将产生形状的黑色轮廓。 （您也可以使用“忽略白色”）。按下Trace 按钮。如果您有很多图层，您可以将这个新的描摹图案保存为预设 - 我称之为我的，Silhouette。现在，我只需单击一个图层，然后从跟踪按钮的下拉菜单中选择 Silhouette。
5. 展开形状并确保它只包含一个平面形状：
   • 您可以使用 Illustrator 中的斑点画笔将任何不需要的白色区域变黑
   • 没有群组
   • 没有复合形状（否则无法使用）- 这意味着您无法创建切口。
   • 当您单击形状时，您可以判断它们是正确的 - 您应该能够看到路径本身，没有涉及“其他”形状（可能是斑点画笔添加） - 只是一条路径。一个简单的方法是这样的：
     • select形状
     • ungroup如有需要
     • release compound path
     • unite（形状模式将所有形状合并为一个）
   • 不要crop您的图像 - 您希望您的形状在图像区域中与原始 Photoshop 图像中的位置相同。
   • 也不要将所有形状连接在一起。
   • 所有形状都应该是单独的整体形状，都在它们的原始位置，每个都在一个单独的层上。
6. 现在，打开 Illustrator 的Attributes panel，并确保“显示选项”。
7. 选择您的形状并在“属性”面板中，将“图像映射”组合框从None 切换到Polygon。确保添加一个 url（你放什么并不重要；你可以稍后更改它 - 我只是放了“#”和形状的名称，这样我就可以在图像映射代码中判断它属于哪个）@ 987654324@
8. 对每个对象执行此操作。
9. 现在，在File 菜单中，转到“保存为网络和设备”。跳过此处的所有设置，只需按“保存”即可。
10. 在“另存为”（窗口标题为“优化另存为”）对话框中，使用“另存为类型：”，如果您只想要代码，请选择HTML Only(*.html)，如果您想要代码，请选择HTML and Images也想要 sillouhuette（它们将出现在名为“图像”的文件夹中） - 并记下您的保存位置。
11. 现在用记事本打开那个 html 文件！
12. 瞧！ 所有的形状都会为您呈现为一个预制的image-map - 点路径，甚至是 html 代码。以下是您在记事本中打开刚刚创建的 html 文件时的样子： 在这个演示中，我选择了一张特别复杂的图片——您永远不想手动估计，也不必做两次！

不要忘记将实际图像文件放在您网站的图像文件夹中的某个位置。您可以保存 psd 文件以供以后使用，如果需要，可以添加更多“东西”，然后重复该过程。

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

Answer 2

创建图像映射非常简单。 首先我们需要看一下代码的语法 让我们创建一个 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 更改坐标，因为 image-maps 仅超链接整个图像，因此使用 firebug 更改坐标并根据您的要求进行调整。

玩得开心。

Answer 3

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

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

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

Answer 4

这一直困扰着我很长时间，我没有 Illustrator 能够使用 BGM 提出的解决方案，我创建了自己的 Photoshop 插件。

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

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

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

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

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

希望这对某人有所帮助。

编辑：添加到源脚本的链接（之前只在 cmets 中）

Answer 5

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

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

2) 在 Photoshop 中打开您的图像并使用魔杖选择表单

3) 右键选择'make work path'（px越小越准确）

4) 转到File -> Scripts -> Browse ... 并选择第一步中的脚本

就是这样！！此脚本将使用坐标打开您的文本编辑器...

Answer 6

这样的东西可能有用；

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

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