How to convert an HTML web page to PNG image on Linux

One of the easiest way to screen capture a particular web page as a PNG image is by using CutyCapt, which is a convenient command line Linux tool for converting any HTML webpage to a variety of vector and bitmat image formats (e.g., SVG, PDF, PS, PNG, JPEG, TIFF, GIF). Internally, CutyCapt uses WebKit rendering engine to export webpage rendering output to an image file. Built with Qt, CutyCapt is actually a cross-platform application available for other platforms such as Windows as well.

In this tutorial, I will describe how to convert an HTML web page to PNG image format using CutyCapt.

Install CutyCapt on Linux

Here are distro-specific instructions to install CutyCapt on Linux.

Install CutyCapt on Debian, Ubuntu or Linux Mint

$ sudo apt-get install cutycapt

Install CutyCapt on Fedora

$ sudo yum install subversion qt-devel qtwebkit-devel gcc-c++ make
$ svn co svn://svn.code.sf.net/p/cutycapt/code/ cutycapt
$ cd cutycapt/CutyCapt

Before compilation on Fedora, you need to patch source code.

Open CutyCapt.hpp with a text editor, and add the following two lines at the beginning of the file.

#include <QNetworkReply>
#include <QSslError>

Finally, compile and install CutyCapt as follows.

$ qmake-qt4
$ make
$ sudo cp CutyCapt /usr/local/bin/cutycapt

Install CutyCapt on CentOS or RHEL

First enable EPEL repository on your Linux. Then follow the same procedure as in Fedora to build and install CutyCapt.

Convert HTML to PNG with CutyCapt

To take a screenshot of an HTML page as a PNG image, simply run CutyCapt in the following format.

$ cutycapt --url=http://www.cnn.com --out=cnn.png

To save an HTML page to a different format (e.g., PDF), simply specify the output file appropriately.

$ cutycapt --url=http://www.cnn.com --out=cnn.pdf

The following shows command-line options of cutycapt.

Convert HTML to PNG with CutyCapt on a Headless Server

While CutyCapt is a CLI tool, it requires an X server running. If you attempt to run CutyCapt on a headless server, you will get the error:

cutycapt: cannot connect to X server :0

If you want to run CutyCapt on a headless server without X windows, you can set up Xvfb (lightweight "fake" X11 server) on the server, so that CutyCapt does not complain.

To install Xvfb on Debian, Ubuntu or Linux Mint:

$ sudo apt-get install xvfb

To install Xvfb on Fedora, CentOS or RHEL:

$ sudo yum install xvfb

After installing Xvfb, proceed to run CutyCapt as follows.

$ xvfb-run --server-args="-screen 0, 1280x1200x24" cutycapt --url=http://www.cnn.com --out=cnn.png

It will launch Xvfb server first, and then use CutyCapt to screen capture the webpage. So it may take longer. If you want to make multiple screenshots, you may want to start Xvfb server as a background daemon beforehand.

Subscribe to Xmodulo

Do you want to receive Linux FAQs, detailed tutorials and tips published at Xmodulo? Enter your email address below, and we will deliver our Linux posts straight to your email box, for free. Delivery powered by Google Feedburner.

8 thoughts on “How to convert an HTML web page to PNG image on Linux

  1. Pretty awesome, definitely gonna do that to the wiki. There is actually a man page to HTML called man2web I believe which is also useful, but it may be going overboard to covert to a PNG... could always take a screenshot :P

  2. One can use the [PrtSc] key and save a web page to png with one key stroke. No CL needed. The application "Shutter" works just as well, and you can select what part of the page you want a screen shot of.

    What am I missing what the author wants us to do or what?

    • With screenshot tools, you only get to capture what you see in your browser window, not the full-length web page. If you can screen capture the whole web page at http://www.cnn.com with PrtSc on your display, then good for you. At least on my display, I cannot. :-)

  3. Thanks Dan for explaining that to me. I didn't realize that one could capture what they couldn't see. I guess that using CutyCapt could be useful.

    Maybe you should place upfront in the article that the app is getting the whole page not just the visible part. Minimize confusion like I had.

Leave a comment

Your email address will not be published. Required fields are marked *

Current day month ye@r *