High Fidelity Screenshots with PhantomJS

I wanted some high resolution screenshots for my project pages on morganintrator.com. I don’t have a macbook with retina, and even if I did, the built-in screenshot tool would not suffice. What would? A “headless WebKit scriptable with a JavaScript API”, I find out. That’s what PhantomJS is. I’m going to tell PhantomJS to boot up a chrome browser that I’ll never see, set its dimensions, and take a screenshot of the website I’m serving locally, and save it as a png file.

As Applekeeps squeezing more pixels into an inch – 2 times as many on Retina, 3x as many on a 6s – websites that want images to display in high fidelity needto have high resolution image assets.

The project pages on morganintrator.com look like this:

Screen Shot 2015-05-22 at 3.53.14 PM

I need a high-res screenshot for that mock laptop screen.

Someone’s done it already

This can’t be that original. But, finding the prior art wasn’t trivial. Maybe 30 minutes of searching before I stumbled into this tutorial:

http://acuriousanimal.com/blog/2012/09/15/taking-web-page-screenshots/

I went searching for some snippets of that code and learned that it was an example for the PhantomJS tool Rasterize. Here’s the example code.

I had to tailor it some. Here’s my Github repo. I left the screenshots in there so you can see what the results look like.

Brilliant. We’ve got retina-ready screenshots. Hell, we could go crazy and get some in print fidelity (10,000px maybe).