4

I'm working on an open source project and we have put our logo and color information together as HTML+CSS. The goal is to configure CI to render the HTML+CSS to varius size PNG and Webp files (for Android, web UI favicon, etc.) to better fit design into the typical development flow. I'm looking for a command-line utility that takes HTML and CSS in and puts an image out. (preferably open source, but if it runs on Linux, even through Wine, it will work for this)

Unfortunately the best option I've found for getting a rendered image (ie: png, webp, etc.) of it is by taking a screenshot of the web browser with the HTML file opened, but this isn't easily automated.

There are add-ons that claim to take screenshots but they change the colors significantly in the generated image from their original appearance and Pandoc also seems incapable of this.

It's an odd request for sure, but it would help keep binary files away from git (which is awesome). And, since none of us are really graphic design people, it's nice to use something that's text-based and doesn't require an expensive editor like something from Adobe.

Improve this question

3 Answers 3

Reset to default
2

I just realized that Firefox also has a headless mode. And it works much better than 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

enter image description here

Free, open source. Much slower than pageres. It uses your Firefox profile, though I am sure there is a way to use a blank profile.

Improve this answer
1
  • Fits the bill perfectly as there is even a docker image for it. The --window-size= option is quite helpful as well.
    – KG6ZVP
    May 23, 2018 at 7:36
3

PageRes converts an HTML+CSS to a PNG image:

https://github.com/sindresorhus/pageres

It is based on the headless Webkit browser PhantomJS.

The command-line tool is https://github.com/sindresorhus/pageres-cli

Free, all open source.

It usually works well and even knows some JavaScript, but for complex websites the output is often not perfect, as seen in the demonstration below:

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

Here is the generated PNG, as you can see it has some faults:

enter image description here

Improve this answer
1
  • This is exactly what I was looking for, though unfortunately it didn't work at all for our project. (I think PhantomJS just isn't able to handle the CSS stuff we are doing). Great find!
    – KG6ZVP
    May 23, 2018 at 6:39
0

Step back from authoring HTML and use one of the many static web site generators such as Jekyll or Hyde to generate the various web sites, including html, css & images for the various targets.

Both are free, open source & cross platform see a comparison here.

Improve this answer
5
  • Unfortunately, it's a logo not an asciidoc or markdown document, so it's a couple of divs with a lot of CSS.
    – KG6ZVP
    May 23, 2018 at 5:33
  • Have you thought of switching to svg format?
    – Steve Barnes
    May 23, 2018 at 5:34
  • SVG doesn't offer the advantages of HTML+CSS. We're using it for animations in the web UI anyway.
    – KG6ZVP
    May 23, 2018 at 5:45
  • @KG6ZVP - The animations will not translate to most of the formats that you mention in the question. Note that it is possible in a number of browsers to have SVG animations - e.g. see css-tricks.com/…
    – Steve Barnes
    May 23, 2018 at 18:45
  • No, we are animating the pure CSS/HTML version of the logo in browser. This utility to turn the HTML and CSS to image is only going to be used for motionless icons.
    – KG6ZVP
    May 23, 2018 at 18:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.