Build a Screenshot App (Part 1): Web Page Module and Screen Capture

If you read my last article which explained PhantomJS and some of its uses. I mentioned that in a follow-up article, we will build a website screenshot tool.

PhantomJS Homepage

Well, this is the first in the series of follow-up articles. Before we jump into building the tool, we first need to dig deeper into PhantomJS screen capture API. We also need to know more about configuring the "page".

Table of Contents

    Working with the PhantomJS Web Page Module

    In the last article, we had an example that went like this.

    var page = require('webpage').create();'', function (status) {

    Executing this script takes a screenshot of homepage. We could also save the image in different formats. We could save the page as a PDF document, JPEG, PNG, and GIF. So if your boss at work says, create a PDF of the sales report, you could create an HTML page with a server-side language and use PhantomJS save the page as a PDF.

    Configuring the WebPage

    It's cool that PhantomJS allows us to visit websites and stuff, but what if we wanted to restrict the page from doing somethings. For example, we need to disable Javascript from running on the page, we could do this.

    var page = require("webpage").create();
    page.settings.javascriptEnabled = false;

    This prevents the page page from running any Javascript. We could also go further and disable more features like loading images.

    page.settings.loadImages = false;

    We could change the userAgent of PhantomJS and make it look like the latest version of Chrome, or a custom user agent like this.

    page.settings.userAgent = 'Scotchy McScotchFace';
    // a play on words like Google's Parsey McParseFace.

    More on PhantomJS's settings here. Note: All these settings must be set before calling open.

    // Will work
    page.settings.userAgent = 'Scotchy McScotchFace';'', function (status) {
        // Won't work
        page.settings.userAgent = 'Scotchy McScotchFace: Rule Breaker';

    Zooming the Page

    In most web browsers, pressing cmd or ctrl + + zooms a webpage, in PhantomJS, we could zoom the webpage by increasing or reducing zoomFactor.

    page.zoomFactor = 0.25;

    The default value for zoomFactor is 100 or 1. We can set the values either using decimals between 0 and 1 or number between 1 and 100.

    Setting the Viewport

    The viewport the window through which we view the page. For example, if your computer screen is 1920 pixels wide and 1080 pixels high, it doesn't matter how large the web page is, the viewport is 1920 by 1080. So with PhantomJS, we can change the browser viewport. If you noticed, so far — when you take a website screenshot, the width of the image generated is 400 pixels. This happens because the default viewport width of PhantomJS is 400 pixels.

    To change the viewport, we use the viewportSize page property which takes an object containing the width and height of the viewport.

    var page = require('webpage').create();
    page.viewportSize = { width: 1366, height: 667 };'', function (status) {

    Now, if we run this script, we can see that the screenshot width is 1366 pixels, and the height is ignored. Setting the viewport height to 1 pixel still won't change anything as the screenshot height will be whatever the the site height is. To take screenshots of a specific size, we need clipping.

    Clipping a Webpage Screenshot

    Clipping is like drawing a box over the page, and taking the shot of content in the box.

    var page = require('webpage').create();
    page.clipRect = { top: 0, left: 0, width: 1024, height: 768 };'', function (status) {

    Doing this gets you a screenshot that is 1024 by 768 pixels. It doesn't matter how large the page is, the size of the screenshot is always the same.

    Building our Screenshot Script

    Before we wrap up this article, let's talk about using PhantomJS with Node. Since PhantomJS cannot be integrated into Node and vice versa, we need to find a way to bridge the differences between both platforms. Fortunately for us, we can run a command line script with Node. So all we need to do is rewrite our scripts above to fit the program.

    Create a file generator.js and place this code in it.

    var args = require('system').args;
    var page = require('webpage').create();
    var url = args[1];
    var save = args[2];
    var width = args[3];
    var height = args[4];
    page.viewportSize = { width: width, height: height };, function () {

    Now we see some weird require imports. Take this command for example.

    phantomjs generator.js screenshot.png 1920 1080

    Well, we want generator.js to be able to parse the arguments being passed into the script. To do that, we need to capture the arguments that we pass to the script. If we require the system module in PhantomJS, we can get the arguments passed to the script from the args object present on the system module. That's all we need do to run a command following this pattern from a command line and generate a simple website screenshot.

    phantomjs generator.js <url> <screenshot.extension> <width> <height>

    Note: You must always call phantom.exit() or else PhantomJS won't stop script execution.

    Wrapping Up

    In the next article, we will talk about the project setup, building a simple server to serve our application, and using our generator.js in Node.

    Samuel Oloruntoba

    41 posts

    🇳🇬. Autodidactic AF. Making PhaseApp. Learning Maths, coding async services. Always trying to squeeze as much performance as he can. Handles relationships.