Как объединить значки в одно изображение с помощью ImageMagick?

Я хочу использовать спрайты CSS на веб-сайте вместо отдельных файлов изображений для большой коллекции маленьких значков что все одного размера. Как я могу объединить (разбить) их в одно большое изображение с помощью ImageMagick?


bitmap imagemagick graphics css-sprites
person Peter Hilton    schedule 17.09.2008    source источник
comment
Используйте инструмент «монтаж»: здесь приведены некоторые инструкции   -  person Ludvig A. Norin    schedule 18.09.2008
comment
Не ImageMagick, но вот инструкции о том, как сделать это на Python с помощью библиотеки изображений Python: 29a.ch/2009/5/14/concatenating-images-using-python   -  person Ashley Davis    schedule 18.06.2012

Ответы (4)


arrow_upward
30
arrow_downward

На странице, на которую вы ссылаетесь, 'montage' — это инструмент, который вам нужен. Он возьмет кучу изображений и объединит их в один вывод. Вот пример изображения, которое я сделал перед использованием инструмента: alt text
(источник: davr.org)

person davr    schedule 17.09.2008

arrow_upward
57
arrow_downward

конвертировать работает намного лучше, чем монтаж. Он упорядочивает изображения вертикально или горизонтально и сохраняет прозрачность png.

convert *.png -append sprites.png (append vertically)
convert *.png +append sprites.png (append horizontally)
person Simon Ernst    schedule 18.05.2012
comment
Ну, я не проверял, но кажется, что -background None разрешает прозрачный фон (см. imagemagick .org/Usage/montage/#bg ) - person AkiRoss; 09.02.2013
comment
Есть проблема, что кажется, что картинки просто добавляются в случайном порядке, несмотря на то, что я назвал их от 1.png до 15.png. Вы знаете, как заставить imagemagick добавлять изображения в указанном порядке? - person xji; 06.01.2015
comment
@AnonJ, ваша оболочка может расширять * до списка имен файлов на основе лексикографического порядка - по крайней мере, для меня это делает zsh. - person Jonathan Chan; 08.01.2015
comment
@JonathanChan Это правда. Я забыл, что числа вроде 15 плохо сочетаются с таким порядком. В любом случае, я использовал некоторые драгоценные камни (в данном случае компасные рельсы) для генерации спрайтов, а не делал это вручную. - person xji; 08.01.2015
comment
Это потрясающе. Есть ли способ указать, сколько строк в столбцах? (или иметь столбцы, если уж на то пошло: P) - person NiCk Newman; 08.10.2016
comment
Это должен быть принятый ответ, монтаж использует размер одного кадра, чтобы установить все кадры внутри результирующего изображения. В то время как «конвертировать добавление» добавляет один кадр за другим, делая его настолько широким или высоким, насколько это необходимо. - person LightMan; 25.07.2018

arrow_upward
24
arrow_downward

Ты ищешь:

montage -background transparent -geometry +4+4 *.png sprite.gif
person Alexander M.    schedule 18.11.2011

arrow_upward
5
arrow_downward

Мне нравится этот скрипт для автоматической генерации спрайтов/CSS. "Создание спрайтов CSS с помощью Bash и Imagemagick"

person printminion    schedule 15.09.2010
comment
@printminion Эта ссылка тоже мертва! - person user2441511; 14.10.2016