Over a million developers have joined DZone.

Taking Web Page Screenshots

DZone's Guide to

Taking Web Page Screenshots

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Recently I have worked on system that requires to take web page screenshots. Not only a screenshot of the whole page but of a concrete element.

Looking on the net I have found many solutions for this problems, which can be classified in to categories:

  • Local applications: I mean a screen capture program or a plugin for your browser (both Chrome and FireFox has some nice plugins for this).
  • Online services: There are some online services that offers possibility to get a screenshots (like url2png), test your web site on different browsers (like browsershots or browserling) or even an API to automatize the task to capture a web page (like thumbalizer or url2png).

The solution

There are alternatives but I like to go beyond the easy solutions and try things, so, after looking a bit more I found a powerful solution: PhantomJS.

Oh, wonderful, but.. what is PhantomJS and what is it good for?

As the project page says:

PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.
PhantomJS is created by Ariya Hidayat.

This means you have all the powerful of a WebKit based browser within a program, so you can use it for: headless website testing, site scraping, page rendering, network monitoring, …

How to use PhantomJS to take a web page screenshot?

Go to the project page and download the binary package . In my case I download the Linux 64-bit system.

PhantomJS is a command line tool and, once and uncompressed the previous package, you will find it in the bin/phantomjs. As a command tool the usage looks like:

./phantomjs [options] script.[js|coffee] [script argument [script argument ...]]


You can get more usage information with: ./phantomjs --help

PhantomJS accepts programs coded in JavaScript or CoffeeScript and, hopefully, the package comes with a examples folder which is full of examples in both languages.

One of the sample programs is the rasterize.[js|coffee] which shows how we can rasterize a web page to an image file.
The program usage is:

./phantomjs rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]


And the whole program code is:

var page = require('webpage').create(),
    system = require('system'),
    address, output, size;

if (system.args.length < 3 || system.args.length > 5) {
    console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]');
    console.log('  paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');
} else {
    address = system.args[1];
    output = system.args[2];
    page.viewportSize = { width: 600, height: 600 };
    if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {
        size = system.args[3].split('*');
        page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }
                                           : { format: system.args[3], orientation: 'portrait', margin: '1cm' };
    if (system.args.length > 4) {
        page.zoomFactor = system.args[4];
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {
            window.setTimeout(function () {
            }, 200);

Probably the most important sentences are:

  • The inclusion of the webpage module:
    var page = require('webpage').create();
  • Load the web page with open function:
    page.open(address, function (status) { ...};
  • Render the web page to a file with the renderfunction:

Note also in the rasterize.js source code the page.viewportSize is defined to be 600x600 which is equivalent as we where navigating a page with a screen resolution of 600x600.

Lets to to see a sample and take a screenshot of this blog site:

./bin/phantomjs ./examples/rasterize.js http://acuriousanimal.com/blog acanimal_blog.png

This makes a screenshot of the whole blog site. Here I attached a modified version of the image with lot less resolution of the original, but you can get an idea of the powerful of PhantomJS.:


Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}