Taking screenshots of websites in PHP


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.

Download Snappy
Downloads : 5204 / File size : 4.2 kB
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!!

This site is a digital habitat of Sameer Borate, a freelance web developer working in PHP, MySQL and WordPress. I also provide web scraping services, website design and development and integration of various Open Source API's. Contact me at metapix[at]gmail.com for any new project requirements and price quotes.

20 Responses

1

Joseph Scott

June 16th, 2011 at 11:34 am

I’ve looked at a few different methods for site screenshots, the biggest problem always comes down to Flash. A common technique is to add a delay after the page has loaded to let the Flash objects finish, but for some sites this means screenshots are really slow. In some cases I found Flash objects still hadn’t properly loaded after a delay of 30 seconds.

2

Andrew Jones

June 16th, 2011 at 12:14 pm

Awesome stuff! Quick question, how much harder would it be, then, to convert the output to a PDF? I can see a real benefit to being able to output dynamically-generated PDF invoices, forms, etc by just designing them in HTML and using this method.

3

Flyingmana

June 16th, 2011 at 1:11 pm

sounds like a wrapper for the webkit engine, which can do this by default over shell. But really nice and a good summary.

4

Sameer Borate’s Blog: Taking screenshots of websites in PHP » Steven's Blog

June 16th, 2011 at 2:46 pm

[...] a new post Sameer Borate shows you how to take screenshots of websites with PHP (and a little help from the wkhtmltoimage tool). aking screenshos of websites is not a [...]

sameer

June 16th, 2011 at 7:41 pm

Andrew you can do this by using a php pdf library, There are a number of classes available on the net.

6

Dave Smith

June 17th, 2011 at 2:21 am

That is genuinely useful, thanks. It used to be an utter pain to do things like this.

I guess my only question is, can one set the user agent header? I’m thinking about things like getting a screenie of the mobile version of a site etc.?

sameer

June 17th, 2011 at 7:18 am

Try something like below:

wkhtmltoimage –custom-header User-Agent Mozilla http://www.bbc.com bbc.jpg

8

Christian

June 17th, 2011 at 8:35 am

Andrew, for PDF output the project offers another binary, wkhtmltopdf, and you may use the following command to render the output as PDF:
wkhtmltopdf http://www.myhomepage.com myhomepage.pdf

sameer

June 17th, 2011 at 7:40 pm

I’ve used the whtmltopdf but it gives inconsistent results for many sites, due to which I did not recommend it.

10

honlapkészítés

June 18th, 2011 at 11:20 pm

Thank you, very interesting article!

11

Generating a color palette from a image

June 20th, 2011 at 9:57 am

[...] the previous post we saw how we can generate a screenshot from a url. In this post we will see how we can create a [...]

12

Webpage Screenshots using PHP | builder2

July 11th, 2011 at 9:58 am

[...] project named wkhtmltopdf, it can now be done with minimal configuration and programming. Using the Linux shell and some PHP scripting via the snappy library, taking screenshots of web pages aren’t so hard at all. [...]

13

n_n

July 25th, 2011 at 3:16 pm

I can’t make work the example with PHP. Why you include
“require_once(‘Knplabs/Snappy/Media.php’);” if in the library “snapy” don’t exist the Media.php file?
plis, Can you make a simple example in PHP? include the library for Windows.

I try put all the library in the path of mi localhost, but don’t work.
I litle help!

sameer

July 25th, 2011 at 10:49 pm

The author of the Snappy library has changed the source, which caused your example to not work. I’ve uploaded the original library above which will work with the examples given. Thanks for the heads-up.

15

n_n

July 26th, 2011 at 8:50 am

Work perfectly!! Thanks a lot.

But don’t work with sites FLASH. I need a image of my dinamic reports, like this:

http://download.hkvstore.com/phprptdemo4/quarterly_orders_by_productctb.php

This type of report contain a FLASH graph. I can’t achieve a image of this site, and less mine.
Any advice? Please, is my last chance, because is more dificult export directly to PDF, that export a image to PDF.
Please a little help!

16

n_n

July 26th, 2011 at 3:44 pm

Sorry the double post, but in the pdf extension ‘wkhtmltopdf’ is the same. I think, problem is the ‘delay’ of FLASH in load of the site. Like as say Joseph Scott in the first answer. The dinamic table of me report appears well, in the PDF file, but the graphics don’t, because are flash.
How I do this? “A common technique is to add a delay after the page has loaded to let the Flash objects finish” Because the flash draw is very small in me report.

Again, thanks a lot.

17

Srikanth AD

August 9th, 2011 at 8:45 am

Probably off topic but, Abobe BrowserLab does an incredible job for cross-browser compatibility check and saving screenshots of a web page in multiple browsers

18

Satinath Mandol

August 27th, 2012 at 12:30 pm

Good web site indeed! But we are unable to capture web page screen having rotate image using Snappy. We have tried with this URL – http://projectscare.com/case_creator/temp1.html

Could anyone please help us in this regard? Many thanks in advance.

19

Error when using wkhtmltoimage cannot ouput from html to image? - feed99

October 29th, 2012 at 8:59 pm

20

rasfoiesc

February 6th, 2013 at 5:20 am

I want to creat some thumbs / images of the firs page of each .doc and displayed it to the left of the title.

See for example:

http://www.rasfoiesc.com/inginerie/tehnica-mecanica/index3.php here is a list of doc. On the left i want to be the thumb too.

- so i want to generate images thumbs for eache Word / doc .

How can i do that?

Your thoughts