Taking screenshos of websites is not a frequent requirement for developers but can come handy on many occasions. Although there are some nice solutions on the web, a particular one I found very good is wkhtmltoimage.

wkhtmltoimage is a simple shell utility which can be used to convert html to images using the webkit rendering engine, and qt.

Installation

To get started we need to first download and install the shell program wkhtmltoimage. Select the appropriate binaries for your platform. As I’m using Ubuntu 10, I downloaded the complied binary ‘wkhtmltoimage-0.10.0_rc2-static-i386.tar.bz2′. Extract it to a appropriate folder and you are ready to go.

Getting your first snapshot

The simplest way to get a snapshot of a url is through the following:

wkhtmltoimage http://www.bbc.com bbc.jpg

This will fetch the www.bbc.com index page and save it as a jpg image. Below are a few websites rendered using the wkhtmltoimage tool.

Customizing the output

wkhtmltoimage comes with a plethora of options, a few are shown below, more options can be found in the documentation.

The default output quality of the program is set to ’94′ which can make the size of some images a lot bigger, but you can change it to your liking using the below option.

wkhtmltoimage --quality 50 http://www.bbc.com bbc.jpg

Also by default all the images on a page are rendered in the final image, but you can disable images in the final screen-shot using the following:

wkhtmltoimage --no-images http://www.bbc.com bbc.jpg

You can also set the output height and width of the image (in pixels) as below.

wkhtmltoimage --height 600 --width 1800 http://www.bbc.com bbc.jpg

or crop the image to a specified size;

wkhtmltoimage --crop-h 300 --crop-w 300 --crop-x 0 --crop-y 0 
       www.bbc.com bbc.jpg

Sometimes the JavaScript on the webpage you are rendering can cause problems during rendering, preventing the program from saving the screenshot or causing a huge delay. In such cases you can ask wkhtmltoimage to not run JavaScript on the page while rendering.

wkhtmltoimage --disable-javascript http://www.bbc.com bbc.jpg

Using with PHP

Although this is not a pure PHP solution for taking screen shots, you can wrap the final command in a shell_exec function or download the ‘snappy’ PHP5 wrapper from below. The original library is located here, but as the source keeps changing the examples given here do not work, so use the library given below.

shell_exec('./wkhtmltoimage --quality 50 http://www.bbc.com bbc.jpg');

Below is a short code using ‘snappy’ to take a screen-shot of bbc.com.

<?php
 
/* Tested on Ubuntu 10.0.4, requires PHP 5.3  */
 
namespace Knplabs\Snappy;
 
require_once('Knplabs/Snappy/Media.php');
require_once('Knplabs/Snappy/Image.php');
 
/* 'wkhtmltoimage' executable  is located in the current directory */
$snap = new Image('./wkhtmltoimage');
 
/* Displays the bbc.com website index page screen-shot in the browser */
header("Content-Type: image/jpeg");
$snap->output('http://www.bbc.com');
 
?>

and with a few options added…

<?php
 
/* Tested on Ubuntu 10.0.4, requires PHP 5.3  */
 
namespace Knplabs\Snappy;
 
require_once('Knplabs/Snappy/Media.php');
require_once('Knplabs/Snappy/Image.php');
 
$options = array('zoom' => 0.5, 'no-images' => true);
 
/* 'wkhtmltoimage' executable  is located in the current directory */
$snap = new Image('./wkhtmltoimage-i386',$options);
 
/* Displays the bbc.com website index page screen-shot in the browser */
header("Content-Type: image/jpeg");
$snap->output('http://www.bbc.com');
 
?>

In my opinion you should play with the shell program first till you get to know the complete options and only than use the ‘snappy’ PHP wrapper.

In closing here is the snapshot of my site ,rendered at 50% quality (click to zoom).

Happy rendering!!