Befehlszeilenprogramm zum Rendern von HTML+CSS in Bilder

Ich arbeite an einem Open-Source-Projekt und wir haben unser Logo und unsere Farbinformationen als HTML+CSS zusammengestellt. Das Ziel besteht darin, CI so zu konfigurieren, dass HTML+CSS in PNG- und Webp-Dateien unterschiedlicher Größe (für Android, Web-UI-Favicon usw.) gerendert wird, um das Design besser in den typischen Entwicklungsablauf einzupassen. Ich suche nach einem Befehlszeilenprogramm, das HTML und CSS aufnimmt und ein Bild ausgibt. (vorzugsweise Open Source, aber wenn es unter Linux läuft, sogar über Wine, wird es dafür funktionieren)

Leider ist die beste Option, die ich gefunden habe, um ein gerendertes Bild (dh: png, webp usw.) davon zu erhalten, einen Screenshot des Webbrowsers mit geöffneter HTML-Datei zu erstellen, aber dies ist nicht einfach zu automatisieren.

Es gibt Add-Ons, die behaupten, Screenshots zu machen, aber sie ändern die Farben im generierten Bild erheblich von ihrem ursprünglichen Aussehen, und Pandoc scheint auch dazu nicht in der Lage zu sein.

Es ist sicherlich eine seltsame Anforderung, aber es würde helfen, Binärdateien von Git fernzuhalten (was großartig ist). Und da keiner von uns wirklich Grafikdesigner ist, ist es schön, etwas zu verwenden, das textbasiert ist und keinen teuren Editor wie etwas von Adobe erfordert.

Antworten (3)

Mir ist gerade aufgefallen, dass Firefox auch einen Headless-Modus hat. Und es funktioniert viel besser als 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

Geben Sie hier die Bildbeschreibung ein

Kostenlos, Open-Source. Viel langsamer als Pageres. Es verwendet Ihr Firefox-Profil, obwohl ich sicher bin, dass es eine Möglichkeit gibt, ein leeres Profil zu verwenden.

Passt perfekt, da es sogar ein Docker-Image dafür gibt. Die --window-size=Option ist auch sehr hilfreich.

PageRes konvertiert ein HTML+CSS- in ein PNG-Bild:

https://github.com/sindresorhus/pageres

Es basiert auf dem Headless-Webkit-Browser PhantomJS.

Das Befehlszeilentool ist https://github.com/sindresorhus/pageres-cli

Kostenlos, alles Open Source.

Es funktioniert normalerweise gut und kennt sogar etwas JavaScript, aber bei komplexen Websites ist die Ausgabe oft nicht perfekt, wie in der folgenden Demonstration zu sehen ist:

$ 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'

Hier ist das generierte PNG, wie Sie sehen können, hat es einige Fehler:

Geben Sie hier die Bildbeschreibung ein

Das ist genau das, wonach ich gesucht habe, obwohl es für unser Projekt leider überhaupt nicht funktioniert hat. (Ich denke, PhantomJS ist einfach nicht in der Lage, mit dem CSS-Zeug umzugehen, das wir machen). Toller Fund!

Treten Sie vom Erstellen von HTML zurück und verwenden Sie einen der vielen statischen Website-Generatoren wie Jekyll oder Hyde , um die verschiedenen Websites zu generieren, einschließlich HTML, CSS und Bildern für die verschiedenen Ziele.

Beide sind kostenlos, Open Source und plattformübergreifend. Einen Vergleich finden Sie hier .

Leider ist es ein Logo, kein Asciidoc- oder Markdown-Dokument, also ein paar Divs mit viel CSS.
Haben Sie daran gedacht, zum SVG-Format zu wechseln?
SVG bietet nicht die Vorteile von HTML+CSS. Wir verwenden es sowieso für Animationen in der Web-Benutzeroberfläche.
@KG6ZVP - Die Animationen werden nicht in die meisten Formate übersetzt, die Sie in der Frage erwähnen. Beachten Sie, dass es in einer Reihe von Browsern möglich ist, SVG-Animationen zu haben - siehe zB css-tricks.com/…
Nein, wir animieren die reine CSS/HTML-Version des Logos im Browser. Dieses Dienstprogramm zum Umwandeln von HTML und CSS in Bilder wird nur für bewegungslose Symbole verwendet.
Befehlszeilenprogramm zum Rendern von HTML+CSS in Bilder
AntwortenHierDatenschutz-Bestimmungen1y, 0v