TroyGrosfield.com TroyGrosfield.com

Headline

Create a Screenshot Using PhantomJS

Author
by Troy Grosfield
Date
November 27th, 2013
Category
Developer
Story

I found this to be a bit interesting so I thought I would share with others.  My goal was to find a way to automate taking a screenshot of a website.  Below is an example of how to do it in PhantomJS:

Install PhantomJS

There page pretty much explains everything:

I’m on a Mac and use brew, so my installation was super easy:

$ brew update && brew install phantomjs

If the installation was successful, go to the terminal (or command line) and type the following command:

$ phantomjs
phantomjs>

If you see the phantomjs prompt, it’s successfully installed on your computer.

Create the Javascript file with instructions to PhantomJS

$ cd ~
$ vi troygrosfield.js
var WebPage = require('webpage');
page = WebPage.create();
page.open('http://troygrosfield.com');
page.onLoadFinish = function() {
    page.render('troygrosfieldscreenshot.png');
    phantom.exit();
}
$ ls
troygrosfield.js

Create the Screenshot

Now that we have the file created, let’s create the screenshot:

$ phantomjs troygrosfield.js
$ ls -l
troygrosfield.js
troygrosfieldscreenshot.png

View the Screenshot

If I open the screenshot like so:

$ open troygrosfieldscreenshot.png

I see the following image:

troygrosfieldcomscreenshot

Tags
Comments
No Comments »

No Comments Yet

Leave a reply