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

Posted 2023-02-16

【中文标题】如何获取用于图像映射的形状的路径坐标？

【英文标题】：How to get the path coordinates of a shape for use with image-maps?

【发布时间】：2012-11-30 12:33:14

【问题描述】：

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

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

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

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

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

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

【参考方案1】：

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

这是我的过程。

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

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

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

【讨论】：

我跳过了大部分的 Photoshop 东西 b/c 我已经在 illustrator 中拥有了我的图标，但步骤 6 和 7 是我必须遵循的主要步骤。但是，对于 CS6，似乎没有“保存为 Web 设备”，只有“保存为 Web”，并且没有将类型保存为“html 和图像”的选项。在与“保存”按钮相同的屏幕上有一个“预览”按钮，它将为您提供在浏览器中使用的 html 标记，这似乎适用于我的情况（在谷歌地图中使用自定义图标）。写得真好！

@hellatan 如果您单击“保存为网络”对话框左下角的预览，它会将您带到一个 html 页面，您可以在其中复制/粘贴您的图像区域。

非常感谢您提供这个出色的解决方案。我在 Adob​​e CC 中尝试过此操作，并且在将 URL 分配给图像映射之前必须在我的跟踪中选择“取消组合”。我不明白为什么，但可能会帮助某人。我必须做的另一项更改是将我的 psd 保存为 72ppi，以防止在 Illustrator 中打开图像时调整其大小。它必须匹配 Illustrator 的默认 ppi。

酷...这是使用图像映射器的非常实用的信息

@MikePennington 谢谢！我很高兴发布了这个小教程。你可以在这里看到我的例子：shoppe.sspxusa.org

【参考方案2】：

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

<div align="right">

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

<img src=""    usemap="#nameofmap" />

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

<map name="nameofmap">
<area href="wherever I wanna take that.com"  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 更改坐标并根据您的要求进行调整。

玩得开心。

【参考方案3】：

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

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

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

【参考方案4】：

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

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

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

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

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

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

希望这对某人有所帮助。

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

【讨论】：

说，这看起来很有趣！你能让它在 CS5 上工作吗？我想试试看。看起来我需要 Adob​​e Configurator for CS6 才能下载它。有直接链接吗？

我不知道如何为 CS5 制作“插件”，因为 Adob​​e Configurator 不允许这样做，但我可以给你它使用的 javascript。尝试将此pastebin.com/8ugcAV3j 保存为 pathToCoords.jsx，然后在 Ps 中运行它（在 CS6 中它位于 File->Scripts->Browse.. 下）。让我知道它是否适用于 CS5 和/或您是否找到了一种方法来以某种方式为脚本“添加书签”，这样您就不必每次都浏览它。

感谢 js；事实上，这看起来像一个常规的扩展脚本。我会尝试并在这里发回。

+1 这对我很有帮助，因为我没有插画师。非常感谢:)

你应该将JS添加到答案中，看看背后的逻辑也很有趣:)

【参考方案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 ... 并选择第一步中的脚本

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

【参考方案6】：

这样的东西可能有用；

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

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