如何将多个图像合并为一个具有精确位置和大小的图像以使用 graphicsmagick 创建一个精灵表？答案

【问题标题】：How do I merge multiple images into one with exact positions and sizes to create a sprite sheet with graphicsmagick?如何将多个图像合并为一个具有精确位置和大小的图像以使用 graphicsmagick 创建一个精灵表？
【发布时间】：2017-06-15 05:39:56
【问题描述】：

我正在尝试使用graphicmagick（或imagesmagick）将多个图像组合成一个具有各种尺寸和大小的图像。理想情况下，它应该是这样的图像：enter link description here

我已经在论坛和谷歌上搜索了几天来弄清楚如何准确地实现这一点，但我在图像处理方面还很陌生，现在不知道如何在 nodejs 中实现这一点。

在所附图片中，我会说 15 张不同的图片需要合并为一张。

【问题讨论】：

这可能会有所帮助...stackoverflow.com/a/30625536/2836621
谢谢，帮助了一些但不多。使用 bash，我实际上看不到他们使用图形/imagemagick 的任何地方
请参阅 imagemagick.org/Usage/montage 处的 Imagemagick 蒙太奇命令您可以避免使用标签并根据需要调整间距，使其看起来与您的示例相似。但是，每个图像都将位于其自己的单元格（图块）中。
谢谢@fmw42。我认为蒙太奇方法可能与几何标志一起是我需要的。我找不到/工作通过和很好的例子。有什么代码示例或基本的 sn-ps 可以开始使用吗？

标签： node.js imagemagick graphicsmagick

【解决方案1】：

这里有 3 个使用 ImageMagick 和蒙太奇的示例。您使用 -geometry +X+Y 设置间距和 -tile XxY 分别设置列数和行数。

输入图像：

montage shading.gif present.gif medical.gif balloon.gif -tile 4x1 -geometry +10+10 montage1.jpg

montage shading.gif present.gif medical.gif balloon.gif -tile 2x2 -geometry +10+10 montage2.jpg

montage shading.gif present.gif medical.gif -tile 2x2 -geometry +10+10 montage3.jpg

如果您需要更多信息，请告诉我。

如果您将所有文件放在一个目录中，并且您希望它们根据您的 -tile 参数按字母顺序显示，那么您可以将目录更改为该目录并执行

蒙太奇 * -geometry +10+10 -tile XxY 结果

您还可以更改背景颜色、添加标签和/或框架。见http://www.imagemagick.org/Usage/montage/

您的 ImageMagick 版本是多少？如果 IM 6，那么上面应该可以工作。 Windows 用户可能需要使用 path2\convert.exe 其中 path2 是 imagemagick convert 的路径（相对于 Windows convert）；或重命名 ImageMagick 转换。如果 ImageMagick 7，则使用“magick montage”而不是“montage”。

【讨论】：

非常感谢。这很有帮助。我认为我最大的问题是我似乎无法弄清楚如何在 nodejs 中实现它。我需要将这些操作作为我正在构建的应用程序的一部分进行。我默认使用这个 gm 包装器来完成它，但希望我可以用你的例子来完成它（aheckmann.github.io/gm/docs.html）
对不起，我对节点一无所知
如果您需要精确放置精灵而不是规则间隔的行和列，那么您需要在每个图像上编写一个脚本循环，使用转换背景精灵 -geometry +X+Y compose over -composite background 将每个精灵放置一个所需的 X，Y 位置到背景上，每个合成后必须使用相同的名称进行更新。
终于解决了我想用node-canvas完成的事情。 github.com/Automattic/node-canvas