如何使用ImageMagick将图标连接成单个图像？

I want to use CSS sprites on a web site instead of separate image files, for a large collection of small icons that are all the same size. How can I concatenate (tile) them into one big image using ImageMagick?

我想在网站上使用CSS精灵而不是单独的图像文件,用于大量相同大小的小图标。如何使用ImageMagick将它们连接(平铺)成一个大图像?

4 个解决方案

#1

From the page you linked, 'montage' is the tool you want. It'll take a bunch of images and concatenate/tile them into a single output. Here's an example image I've made before using the tool: alt text http://davr.org/ds2/demos2/index.png

从您链接的页面,“蒙太奇”是您想要的工具。它需要一堆图像并将它们连接/平铺成单个输出。这是我在使用该工具之前制作的示例图像:alt text http://davr.org/ds2/demos2/index.png

#2

convert works much better than montage. It arranges images vertically or horizontally and keeps png transparency.

转换效果比蒙太奇好得多。它垂直或水平排列图像并保持png透明度。

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

#3

You are looking for:

您正在寻找:

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

#4

I like this script for automatical sprite/css generation. "Building CSS sprites with Bash & Imagemagick"

我喜欢这个脚本用于自动精灵/ css生成。 “使用Bash和Imagemagick构建CSS精灵”

article copy in Waybackmashine https://web.archive.org/web/20150529041037/http://jaymz.eu/blog/2010/05/building-css-sprites-with-bash-imagemagick

文章副本在Waybackmashine https://web.archive.org/web/20150529041037/http://jaymz.eu/blog/2010/05/building-css-sprites-with-bash-imagemagick
script copy http://blog.kupriyanov.com/2011/01/solvedbuilding-css-sprites-with-bash.html

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

#1

#2