Утилита командной строки для рендеринга HTML+CSS в изображение

Я работаю над проектом с открытым исходным кодом, и мы объединили наш логотип и информацию о цвете в виде HTML+CSS. Цель состоит в том, чтобы настроить CI для рендеринга HTML+CSS в файлы PNG и Webp различного размера (для Android, значок веб-интерфейса и т. д.), чтобы лучше вписать дизайн в типичный процесс разработки. Я ищу утилиту командной строки, которая принимает HTML и CSS и выводит изображение. (желательно с открытым исходным кодом, но если работает на линуксе, хоть через Wine, то и для этого подойдет)

К сожалению, лучший вариант, который я нашел для получения визуализированного изображения (например, png, webp и т. д.), — это сделать снимок экрана веб-браузера с открытым HTML-файлом, но это нелегко автоматизировать.

Существуют надстройки, которые утверждают, что делают снимки экрана, но они значительно меняют цвета в сгенерированном изображении по сравнению с их первоначальным видом, и Pandoc также, похоже, не способен на это.

Это, конечно, странный запрос, но он поможет защитить двоичные файлы от git (что здорово). И, поскольку никто из нас не занимается графическим дизайном, приятно использовать что-то текстовое и не требующее дорогого редактора, как что-то от Adobe.

Ответы (3)

Я только что понял, что в Firefox тоже есть безголовый режим. И это работает намного лучше, чем pageres:

$ firefox -headless -screenshot https://softwarerecs.stackexchange.com/questions/47039/english-etymology-dictionary-usable-on-windows
*** You are running in headless mode.
$ ls
screenshot.png

введите описание изображения здесь

Бесплатный, с открытым исходным кодом. Гораздо медленнее, чем пейджеры. Он использует ваш профиль Firefox, хотя я уверен, что есть способ использовать пустой профиль.

Идеально подходит для этого, так как для него даже есть образ докера. Вариант --window-size=тоже очень полезный.

PageRes преобразует HTML+CSS в изображение PNG:

https://github.com/sindresorhus/pageres

Он основан на безголовом браузере Webkit PhantomJS.

Инструмент командной строки https://github.com/sindresorhus/pageres-cli .

Бесплатно, все с открытым исходным кодом.

Обычно он работает хорошо и даже немного знает JavaScript, но для сложных веб-сайтов вывод часто не идеален, как показано в демонстрации ниже:

$ pageres https://softwarerecs.stackexchange.com/questions/50269/command-line-utility-for-rendering-htmlcss-to-image

✔ Generated 1 screenshot from 1 url and 1 size
$ ls
'softwarerecs.stackexchange.com!questions!50269!command-line-utility-for-rendering-htmlcss-to-image-1366x768.png'

Вот сгенерированный PNG, как вы можете видеть, он имеет некоторые ошибки:

введите описание изображения здесь

Это именно то, что я искал, хотя, к сожалению, это совсем не сработало для нашего проекта. (Я думаю, что PhantomJS просто не в состоянии справиться с CSS-вещами, которые мы делаем). Отличная находка!

Отойдите от разработки HTML и используйте один из многих генераторов статических веб-сайтов, таких как Jekyll или Hyde , для создания различных веб-сайтов, включая html, css и изображения для различных целей.

Оба являются бесплатными, с открытым исходным кодом и кросс-платформенными. См. сравнение здесь .

К сожалению, это логотип, а не документ asciidoc или markdown, поэтому это пара разделов с большим количеством CSS.
Вы думали о переходе на формат svg?
SVG не предлагает преимуществ HTML+CSS. В любом случае, мы используем его для анимации в веб-интерфейсе.
@ KG6ZVP - Анимация не будет переводиться в большинство форматов, которые вы упомянули в вопросе. Обратите внимание, что в ряде браузеров возможна анимация SVG — например, см. css-tricks.com/…
Нет, мы анимируем чистую CSS/HTML версию логотипа в браузере. Эта утилита для преобразования HTML и CSS в изображение будет использоваться только для неподвижных значков.
Утилита командной строки для рендеринга HTML+CSS в изображение
СпросиСетьПолитика конфиденциальности1y, 0v