如何使用ImageMagick将图标合并为单个图像？

Question

我想在网站上使用CSS精灵代替单独的图像文件，用于一个大量、大小相同的小图标集合。如何使用ImageMagick将它们连接（平铺）成一个大图像？

- Peter Hilton

---

使用“montage”工具：这里有一些说明。 - Ludvig A. Norin

不是使用ImageMagick，而是使用Python Image Library，以下是如何在Python中完成此操作的说明： http://29a.ch/2009/5/14/concatenating-images-using-python - Ashley Davis

Answer 1

convert 比 montage 更好用。它可以垂直或水平排列图像，并保留 png 透明度。

convert *.png -append sprites.png (append vertically)
convert *.png +append sprites.png (append horizontally)

- Simon Ernst

---

我没有测试过，但似乎-background None将允许透明背景（请参见http://www.imagemagick.org/Usage/montage/#bg） - AkiRoss

有一个问题，似乎无论我将它们从1.png到15.png命名，它都只是随机追加图片。您知道如何使imagemagick按指定顺序追加图片吗？ - xji

@AnonJ，你的shell可能会根据词典顺序将*扩展为文件名列表 - 至少这是zsh对我所做的。 - Jonathan Chan

@JonathanChan 说得对。我忘了像15这样的数字不适合这种排序方式。无论如何，最终我使用了一些宝石（在这种情况下是compass-rails）来生成精灵，而没有手动操作。 - xji

太棒了！有没有办法指定每列的行数？（或者说有没有列呢:P） - NiCk Newman

这应该是被接受的答案，montage使用一个帧的大小来设置结果图像中所有帧的大小。而'convert append'则将一个帧接在另一个帧后面，使其宽度或高度根据需要调整。 - LightMan

Answer 2

从你提供的链接页面中，"montage" 是你需要使用的工具。它可以将多张图片串联/平铺成单个输出。以下是我之前使用该工具制作的示例图像：

_{（来源：davr.org）}

- Davr

Answer 3

您正在查找：

montage -background transparent -geometry +4+4 *.png sprite.gif

- Alexander M.

Answer 4

我喜欢这个自动生成雪碧图/css的脚本。"用Bash和Imagemagick制作CSS雪碧图"

• Waybackmashine上的文章备份 https://web.archive.org/web/20150529041037/http://jaymz.eu/blog/2010/05/building-css-sprites-with-bash-imagemagick

• 脚本备份 http://blog.kupriyanov.com/2011/01/solvedbuilding-css-sprites-with-bash.html

- printminion

---

@printminion，那个链接也失效了！ - user2441511