Take webpage screenshot from command line in Ubuntu Linux

By | November 1, 2011

There are many instances when you want to take the screenshot of a webpage from within a php script or the command line. On ubuntu there are several ways to do it and most of them produce a webkit , gecko or khtml rendered screenshot image.

Some of the methods require X session to open a window and take screenshots. So VNC can be used to run in on servers for example. To Setup a VNC server on Ubuntu read this article.

1. wkhtmltopdf

wkhtmltopdf is a command line utility that converts html to pdf using webkit rendering engine.

Url :
http://code.google.com/p/wkhtmltopdf/

Install :

sudo apt-get install wkhtmltopdf

Usage :

The usage is very simple. Just run the command providing the url and name of the pdf file.

$ wkhtmltopdf www.google.com google.pdf
Loading page (1/2)
Printing pages (2/2)
Done

This will create the google.pdf file in the home directory.

2. wkhtmltoimage

The wkhtmltoimage utility shall take the screenshot of a given url, and save it as a png image. It uses the webkit rendering engine.

Url :
http://code.google.com/p/wkhtmltopdf/

Docs :
http://madalgo.au.dk/~jakobt/wkhtmltoxdoc/wkhtmltoimage_0.10.0_rc2-doc.html

Download :
http://code.google.com/p/wkhtmltopdf/downloads/list
Extract the archive.

Usage :

To use the wkthmltoimage utility simple run the command from terminal, giving the url and the name for the image file.

$ ./wkhtmltoimage-amd64 http://www.google.com google.png

It will create google.png in home directory with the screenshot of www.google.com

Other options :

wkhtmltoimage provides many options to customise the screenshot. Some examples are as follows :

Quality - Controls the quality/compression of the generation image. Default is 94

$ ./wkhtmltoimage-amd64 --quality 50 http://www.google.com google.png

Disable images

$ ./wkhtmltoimage-amd64 --no-images http://www.google.com google.png

Disable javascript

$ ./wkhtmltoimage-amd64 --disable-javascript http://www.google.com google.png

Crop the screenshot

$ ./wkhtmltoimage-amd64 --crop-h 300 --crop-w 300 --crop-x 0 --crop-y 0 http://www.google.com google.png

Advantages :
1. Can automatically determine the height of the page to take full page screenshots unlike most other utilities.

Disadvantages :
1. Fails many times due to unknown reasons with an error saying "Painter not active".
2. Cannot render cufon fonts and flash animations. Sometimes it even fails in jquery animations which take long time to load.

3. cutycapt

Cutycapt is a utility to take the screenshot of a url, using the webkit rendering engine and save it to an image file.

Url
http://cutycapt.sourceforge.net/

Install

sudo apt-get install subversion libqt4-webkit libqt4-dev g++ cutycapt

Usage
To use cutycapt, simply run the command from the terminal, providing the url and the name for the output file.

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

It will create google.png file in home directory which would have the screenshot of www.google.com

4. khtml2png

khtml2png uses the konqueror rendering engine to create screenshots of web pages.

Download
http://khtml2png.sourceforge.net/index.php?page=download

Install

To install khtml2png, the program has to be compiled and build on the system.

1. sudo apt-get install kdelibs4-dev zlib1g-dev g++ cmake
2. Extract the khtml2png archive.
3. ./configure
4. make
5. sudo checkinstall (this will create a deb file and install it , so that it can easily uninstalled later).

Usage
To use khtml2png run the program from commandline providing the url and other options.

$ khtml2png2 --width 800 --height 600 http://www.google.com/ google.png
kbuildsycoca running...
DCOP Cleaning up dead connections.

This would create a google.png in home directory with the screenshot of www.google.com.

This method requires a running X session. To run it from VNC use as :
Start vnc server :

$ vncserver :12
New 'enlightened-desktop:12 (enlightened)' desktop is enlightened-desktop:12
Starting applications specified in /home/enlightened/.vnc/xstartup
Log file is /home/enlightened/.vnc/enlightened-desktop:12.log

Run the program in the vnc server :

$ DISPLAY=:12 khtml2png2 --width 1024 --height 768 http://www.google.com/ google.png
Xlib:  extension "XInputExtension" missing on display ":12".
Failed to get list of devices
Xlib:  extension "XInputExtension" missing on display ":12".
Failed to get list of devices
kbuildsycoca running...

Use with xvfb :

$ xvfb-run --server-args="-screen 0, 1024x768x24" khtml2png2 --width 800 --height 600 http://www.google.com/ google.png

5. PyWebShot

Url

http://www.coderholic.com/pywebshot-generate-website-thumbnails-using-python/

https://github.com/coderholic/PyWebShot

Pywebshot uses python bindings embedded mozilla ( http://www.mozilla.org/unix/gtk-embedding.html )

Install

1. sudo apt-get install python-gtkmozembed

2. Download pywebshot from https://github.com/coderholic/PyWebShot

Usage :

$ python pywebshot.py www.google.com -t 1024x768&lt;br /&gt;<br />Loading www.google.com... saved as www.google.com.png

It should create a www.google.com.png in the directory which has the screenshot of size 1024 x 768.

This method requires a running X session , since it opens a window to load the url and then save its screenshot.

So VNC can be used like this :

start vnc server :

$ vncserver :12
New 'enlightened-desktop:12 (enlightened)' desktop is enlightened-desktop:12
Starting applications specified in /home/enlightened/.vnc/xstartup
Log file is /home/enlightened/.vnc/enlightened-desktop:12.log

Run pywebshot :

$ DISPLAY=:12 python pywebshot.py www.google.com -t 1024x768
Loading www.google.com... saved as www.google.com.png

Advantages

1. Can succesfully render cufon fonts, complex/long loading jquery animations.

Disadvantages

1. Cannot automatically determine page height to take full page screenshot.

Workaround: If dimensions are available then the dimensions can be specified as the screensize and using such parameters with a virtual monitor can give full page screenshots.

2. Opens up an annoying browers every time on the desktop.
Workaround: Use xvfb.

6. python-webkit2png

Url :

1. http://www.blogs.uni-osnabrueck.de/rotapken/2008/12/03/create-screenshots-of-a-web-page-using-python-and-qtwebkit/

2. https://github.com/AdamN/python-webkit2png/

Install :

1. sudo apt-get install python-qt4 libqt4-webkit

2. Download package from github and extract the archive.

Usage :

$ python webkit2png.py -o google.png http://www.google.com/

It should create a google.png file in the directory with the screenshot of www.google.com

Use with xvfb :

On a webserver since Xorg is not running , xvfb can bed used to take the screenshot.

$ xvfb-run --server-args="-screen 0, 1024x768x24" python webkit2png.py -o google.png http://www.google.com/

Advantages

1. Can succesfully render cufon fonts, complex/long loading jquery animations.

Disadvantages

1. Fails at CSS3 fonts.

2. Cannot automatically determine page height to take full page screenshot.
Workaround: If dimensions are available then the dimensions can be specified as the screensize and using such parameters with a virtual monitor can give full page screenshots

3. Opens up an annoying browers every time on the desktop
Workaround: Use xvfb,vnc.

The above tools and techniques can be used on a webserver with a language like PHP.

About Silver Moon

A Tech Enthusiast, Blogger, Linux Fan and a Software Developer. Writes about Computer hardware, Linux and Open Source software and coding in Python, Php and Javascript. He can be reached at [email protected].

9 Comments

Take webpage screenshot from command line in Ubuntu Linux
  1. absolis

    # wkhtmltopdf https://192.168.0.34:9044/ image002.jpg
    Loading pages (1/6)
    Warning: SSL error ignored
    Warning: SSL error ignored
    Warning: SSL error ignored
    Warning: SSL error ignored
    Warning: SSL error ignored
    Warning: SSL error ignored
    Counting pages (2/6)
    Resolving links (4/6)
    Loading headers and footers (5/6)
    Printing pages (6/6)
    Done

  2. Chen Hu

    If you just need simple and quick solution, I recommend cutycapt. But if you need a stable, high performance system which can handle 1M request per day. Cutycapt will be a nightmare. I encounter a lot of problems when I try to use Cutycapt to handle 1M different websites. But after changed the source code of cutycapt, it still work perfect. I recommend to resize image inside of cutycapt. It will save around 1 seconds per request. BTW, page2images.com (multiple device screenshot) is built base on cutycapt. If you have any interesting, please take a look.

    1. Silver Moon Post author

      its not a good idea to depend on a 3rd party api or remote solution when there are already so many easy to use tools that can be installed on local machine.

  3. John Smith

    Hey, nice tutorial. I tried wkhtmltoimage and just wanted to share something. The command gives some weird errors/warnings like these –

    $ ./wkhtmltoimage-amd64 http://google.com google.png
    Loading page (1/2)
    Rendering (2/2)
    QPixmap: Cannot create a QPixmap when no GUI is being used ] 25%
    QPixmap: Cannot create a QPixmap when no GUI is being used
    Done

    Although the screenshot *does get* generated. So, no worries i guess :D

Leave a Reply

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