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





Мне нравится этот скрипт для автоматической генерации спрайтов / CSS. «Создание спрайтов CSS с помощью Bash и Imagemagick»
копия статьи в 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 Эта ссылка тоже мертва!
Ты ищешь:
montage -background transparent -geometry +4+4 *.png sprite.gif
конвертировать работает намного лучше монтажа. Он упорядочивает изображения по вертикали или горизонтали и сохраняет прозрачность png.
convert *.png -append sprites.png (append vertically)
convert *.png +append sprites.png (append horizontally)
Ну, я не тестировал, но кажется, что -background None допускает прозрачный фон (см. imagemagick.org/Usage/montage/#bg)
Проблема состоит в том, что изображения добавляются в случайном порядке, несмотря на то, что я назвал их от 1.png до 15.png. Вы знаете, как заставить imagemagick добавлять изображения в указанном порядке?
@AnonJ, ваша оболочка может расширять * до списка имен файлов на основе лексикографического порядка - по крайней мере, это то, что zsh делает для меня.
@JonathanChan Это правда. Я забыл, что числа вроде 15 не подходят для такого порядка. В любом случае, я в конечном итоге использовал какой-то драгоценный камень (в данном случае компас-рельсы) для генерации спрайтов и не делал этого вручную.
Это потрясающе. Есть ли способ указать, сколько строк в столбце? (или столбцы, если на то пошло: P)
Это должен быть принятый ответ, монтаж использует размер одного кадра, чтобы установить все кадры внутри полученного изображения. В то время как 'convert append' добавляет один фрейм за другим, делая его настолько широким или высоким, насколько необходимо.
Не ImageMagick, но вот инструкции, как это сделать в Python с помощью библиотеки изображений Python: 29a.ch/2009/5/14/concatenating-images-using-python