Create WebPage Screenshots with Node.js and PhantomJS

By  on  

Automation on the web has gotten incredibly accessible and advanced, much in part to utilities like PhantomJS.  PhatomJS allows you to do headless WebKit render testing, network monitoring, page automation, and much more.  One of the simple tasks I like using PhatomJS for is screenshot creation.  Sure I could use another service or another utility but PhantomJS is so flexible and easy to use that there's no need to look elsewhere!

Creating a Screenshot

Assuming you've downloaded PhatomJS, create a JavaScript file (screenshot.js for example) with the following contents:

var page = require('webpage').create();
page.open('https://davidwalsh.name/', function() {
  page.render('davidwalshblog.png');
  phantom.exit();
});

With that script created, open your command line tool and execute the following:

phantomjs screenshot.js

That's all it takes to create a screenshot of a website!

Setting Viewport Size

PhantomJS makes setting the viewport size easy as well, just one setting to change:

var page = require('webpage').create();
page.viewportSize = { width: 1920, height: 1080 };
page.open('https://davidwalsh.name/', function() {
  page.render('davidwalshblog1920.png');
  phantom.exit();
});

Modifying setting sizes is nice so that you can quickly automate different media query sizes based on your site's specifications!

Every few weeks I'll take screenshots of my site to ensure I've not made any design changes that have broken any of my designs.  I'll also use this strategy for creating screenshots of redesign ideas.  I love how easy automation of these types of tasks has gotten these days!

Recent Features

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    Image Data URIs with PHP

    If you troll page markup like me, you've no doubt seen the use of data URI's within image src attributes. Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute. Doing so saves...

  • By
    MooTools ContextMenu Plugin

    ContextMenu is a highly customizable, compact context menu script written with CSS, XHTML, and the MooTools JavaScript framework. ContextMenu allows you to offer stylish, functional context menus on your website. The XHTML Menu Use a list of menu items with one link per item. The...

Discussion

  1. MaxArt

    It’s worth noting that Phantom uses WebKit as its render engine. Slimer uses Gecko instead, while a headless version of Chrome – directly from Google – is also next to be released.

    Alas, nothing decent for Trident or Edge.

  2. Great script for generating screenshots from responsive websites and web applications to see if everything is designed well. Thank you for this blog! :)

  3. If you’d like some more options and easy integration with other code I recommend checking Manet https://github.com/vbauer/manet

  4. DaveR

    Last time I tried node + phantom I ran into a lot of problems around webfont rendering ranging from webfonts not be rendered at all to webfonts partially rendering (with different results each time I ran it) depending on which version of phantom source I built from. At some point I gave up on it and just switched over to browserstack using some of their automated testing functionality.

    I’m hoping to revisit phantomjs once the webfont support is more reliable.

    Anyone else run into webfont related issues with phantom?

  5. Great tutorial, pity taking an accurate retina screenshot isn’t easy

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!