我想尝试的 CSS Sprite技术加载一些缩略图作为一个单一的图像。因此,我需要“合并”在一个单一的文件在服务器脱机一些缩略图。
假设我有10个相同大小的缩略图,您建议我如何从 Linux 命令行“合并”它们?
使用 netpbm-package 的 pnmcat。
pnmcat
为了使用它,你可能不得不来回转换你的输入文件:
pnmcat -lr <(pngtopnm 1.png) <(pngtopnm 2.png) | pnmtopng > all.png
编辑: 正如用户 Hashbrown 在评论中指出的那样,在 PNG 中使用不同的大小和/或透明度可能会有麻烦。为了避免他提出这个解决方案(只是复制到这里,因为 Q 是封闭的,不能添加新的答案) :
pnmcat -jleft -tb \ <(pngtopnm image139.png) \ <(pngtopnm image73.png) \ | pnmtopng \ -alpha <(pnmcat -black -jleft -tb \ <(pngtopnm -alpha image139.png) \ <(pngtopnm -alpha image73.png) \ ) \ >test.png
但我没有测试那个溶液。
你也可以试试 图像魔术,它非常适合创建 CSS 精灵。关于它的一些教程 给你。
例子(垂直精灵) :
convert image1.png image2.png image3.png -append result/result-sprite.png
例子(水平精灵) :
convert image1.png image2.png image3.png +append result/result-sprite.png
你也可以使用 图形魔术,它是 ImageMagick 的一个更轻更快的分支:
gm convert image1.png image2.png -append combined.png
合并12幅图像的简单时间比较:
time convert image{1..12}.jpg -append test.jpg real 0m3.178s user 0m3.850s sys 0m0.376s time gm convert image{1..12}.jpg -append test.jpg real 0m1.912s user 0m2.198s sys 0m0.766s
GraphicsMagick 的速度几乎是 ImageMagick 的两倍。
如果希望从左到右合并图片,请使用以下命令:
convert image{1..0}.png +append result/result-sprite.png
注意 +append而不是 -append。
+append
-append