Command-line utility for rendering HTML+CSS to image
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.
3 Answers 3
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 
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.
Convert HTML to image
Batch convert various syntax-highlighted source files (C, SQL, Java, PHP, batch, bash) into high-resolution images (600dpi), suitable for an eBook and printed book.
Failed Solutions
- OpenOffice or LibreOffice — Have to re-import source code into the document every time the source file changes. (That is, the solution cannot be easily automated for hundreds or thousands of source files.)
- enscript. Cannot easily change colours, imperfectly renders output, not comprehensive.
- LyX / LaTeX. Imperfectly renders output.
- gvim to HTML — HTMLDOC to PostScript — GhostScript to PNG. HTMLDOC ignores font tags.
- gvim to HTML — html2ps — GhostScript to PNG. RGB colours are not recognized by html2ps .
- Firefox to PostScript — GhostScript to PNG. Obnoxiously circuitous.
- gvim to HTML — OmniFormat to anything. Free version unsuitable for batch processing; lots of advertising pop-ups.
- pygments. Cannot easily change image resolution; does not have gvim’s range of colour schemes.
Closest Solution
The solution that almost works is:
- gvim to HTML — wkhtmltopdf to PDF. Will require post-processing with ImageMagick (wkhtmltoimage cannot set image resolution, only page width).
Requirements
- Windows and Linux, but either is acceptable.
- Free or OSS
- Command line only (suitable for batch processing)
- Easily change colour scheme
- Support: PHP, batch, bash, Java, JavaScript, R, C, and SQL
Question
Any other ways to convert syntax-highlighted source code to a high-resolution (600dpi) image?
@Dave Jarvis: why is wkhtmltoimage and setting the width of the page not enough? the height can not be specified since it is determined by the content of the html stuff. imho width is all you actually need, you can calculate the needed width based upon how many pixels per inch you want.
@Dave Jarvis: well, just tell me how munch inches you want to cover and i tell you how much pixels you will need. ‘trimming’ the result with convert afterwards is a nice idea but destroys the idea of ‘dpi’ somewhat. you always start with «i need to fill this x inch of space and i want it filled with z dots per inch» .. and based upon that formula you request pixels.
@akira: The width is dependent on the number of columns the source code uses. Sometimes the width will be 75 characters. Sometimes it will be 40 characters. So 75 characters should take up about 5.5 inches and 40 characters should be slightly more than half that. The 5.5 value depends on the margins of the book, which are subject to change (once or twice). This is a calculation that needs to be done automatically, by the way, otherwise the solution cannot be automated, which defeats the entire purpose.
@Dave Jarvis: yep, i understand your problem. you are lucky with convert that the output of webkit in your case is really scalable and thus you could ‘resize’ the pdf afterwards. for an integrated solution i suspect one would need some kind of zoom-level AND the width of the ‘browser’
btw, what is the document format you are using to create the ebook or the printed book (latex, xsl-fo .. etc?)
2 Answers 2
Software Requirements
The following software packages are available for both Windows and Linux systems, and are required for a complete, working solution:
- gvim — Used to export syntax highlighted source code to HTML.
- moria — Colour scheme for syntax highlighting.
- wkhtmltoimage — Used to convert HTML documents to PNG files.
- gawk and sed — Text processing tools.
- ImageMagick — Used to trim the PNG and add a border.
General Steps
Here is how the solution works:
- Load the source code into an editor that can add splashes of colour.
- Export the source code as an HTML document (with embedded FONT tags).
- Strip the background attribute from the HTML document (to allow transparency).
- Convert the HTML document to a PNG file.
- Trim the PNG border.
- Add a small, 25 pixel border around the image.
- Delete temporary files.
The script generates images that are all the same width for source files containing lines that are all under 80 characters in length. Source files with lines over 80 characters long result in images as wide as necessary to retain the entire line.
Installation
Install the components into the following locations:
- gvim — C:\Program Files\Vim
- moria — C:\Program Files\Vim\vim73\colors
- wkhtmltoimage — C:\Program Files\wkhtml
- ImageMagick — C:\Program Files\ImageMagick
- Gawk and Sed — C:\Program Files\GnuWin32
Note: ImageMagick has a program called convert.exe , which cannot supersede the Windows convert command. Because of this, the full path to convert.exe must be hard-coded in the batch file (as opposed to adding ImageMagick to the PATH ).
Environment Variables
"C:\Program Files\Vim\vim73";"C:\Program Files\wkhtml";"C:\Program Files\GnuWin32\bin" Batch File
Create a batch file called src2png.bat by copying the following contents:
@ECHO OFF SET NUMBERS=-c "set number" IF "%2" == "" SET NUMBERS= ECHO Converting %1 to %1.html. gvim -e %1 -c "set nobackup" %NUMBERS% -c ":colorscheme moria" ^ -c :TOhtml -c wq -c :q REM Remove all background-color occurrences (without being self-referential) sed -i "s/background-color: #. ; \(.*\)>$/\1 >/g" %1.html ECHO Converting %1.html to %1.png. wkhtmltoimage --format png --transparent --minimum-font-size 80 ^ --quality 100 --width 3600 ^ %1.html %1.png move %1.png %1.orig.png REM If the text file has lines that exceed 80 characters, don't crop the REM resulting image. (The book automatically shrinks large images to fit.) REM The 3950 is the 80 point font at 80 characters with padding for line REM numbers. SET LENGTH=0 FOR /F %%l IN ('gawk ^ "BEGIN x ) x=length()> END " %1') ^ DO ( SET LENGTH=%%l ) SET EXTENT=-extent 3950x IF %LENGTH% GTR 80 SET EXTENT= REM Trim the image height, then extend the width for 80 columns, if needed. REM The result is that all images will be resized the same amount, thus REM making the font size the same maximum for all source listings. Source REM files beyond the 80 character limit will be scaled as necessary. ECHO Trimming %1.png. "C:\programs\ImageMagick\convert.exe" -format png %1.orig.png ^ -density 150x150 ^ -background none -antialias -trim +repage ^ %EXTENT% ^ -bordercolor none -border 25 ^ %1.png ECHO Removing old files. IF EXIST %1.orig.png DEL /q %1.orig.png IF EXIST %1.html DEL /q %1.html IF EXIST sed*. DEL /q sed*. Improvements and optimizations welcome.
Note: The latest version of wkhtmltoimage properly handles overriding the background colour. Thus the line to remove the CSS for background colours is no longer necessary, in theory.