Web Page Screenshot with PhantomJS


Web Page Screenshot with PhantomJS

PhantomJS is quite popular for headless testing of web applications. Because it packs real WebKit engine and it does not use any emulated implementation of DOM, CSS, Canvas, etc, PhantomJS can render a web page almost as good as what is expected from a web browser. This feature turns out to be quite useful to programmatically capture the content and save it as an image.

The simplest example of web page capture using PhantomJS is the following script. It is self-explanatory.

var page = require('webpage').create();
page.open('http://google.com', function () {

A web service to capture web sites is something a lot of people would want to have. There are commercial solutions like url2pngand websnapr to do that. If you want a DIY approach, this is however rather easy with PhantomJS. In fact, there are few ready-to-use screenshooting projects based on PhantomJS you need to look at, see the complete list for more info.

The working principle of such a project is dead simple. There is a front-end which deals with the API, i.e. handling the URL to be requested, the size of the preview, and so on. This will further kick a PhantomJS process which rasterizes the requested page. It is rather easy to construct and thus people have combined PhantomJS with anything from Node.js to Play2 framework.

For an online example of a screenshot project, take a look at Screener with its simplistic interface. Give it a try with your favorite web site and see how it handles it.

Since PhantomJS version 1.6 (Lavender), there are two additional features which can be useful for this screen capture purposes. The first one is zoom factor, implemented by Milian. By default it is 1, setting this value to 0.25 you will get the rendered web page in 25% zoom. This is really good if all you want is a thumbnail preview only. Another feature, this time coded by Ivan, is to output the rendering as base64 encoded image (preferably in PNG). This means, there is no need to save the capture into a temporary image file.

If we tweak our previous example to use these two features, the code would look like snippet. It will snapshot Google homepage, make it 4x smaller, and encode it as PNG in base64 straight to stdout.

var page = require('webpage').create();
page.open('http://google.com', function () {
    page.zoomFactor = 0.25;

For some final inspiration, let’s see two projects which leverage the power of PhantomJS screen capture: Media Queries and ChromaNope.

mediaqueri.es from Eivind Uggedal is a collection of web sites with responsive design in mind. Every web page in the collection will be capture with a variety of viewport dimensions, thereby automating the look as if the page is visible on different mobile devices.

ChromaNope, built by Kris Hedges, is a simple web service which captures a web page and display it in 4 variants, normal and dichromacy: protanope, deuteranope, and tritanope. The goal is to simulate your sites for the color blinds. As Kris himself has written, “This helps designers make informed decisions about accessibility by identifying potential problems that color-blind users might have, problems that might have otherwise gone unnoticed.”

About Author Post

Team Dy Technology LLP - Sunday, 24 September 2017 3:05 Comment Link

We Are Among The Top Software , Web Solution, Mobile Apps, HR Company In Delhi NCR. Dy Technology LLP is a Leading Awarded Software Development headquartered in New Delhi and having its branch at Varanasi. Services offered include Software Development (Custom Software Development, General Purpose Softwares, ERP, CRM, HRMS), Premium Web Designing, CMS, E-Commerce, Online Marketing, SEO/SMO, Mobile Apps, Portal Development etc at unimaginable prices! We Raise the Bar in Quality and Customer Satisfaction standards.

Comments Post

homepage -
Sunday, 15 October 2017 6:31 Comment Link

Wow, this piece of writing is good, my younger sister is analyzing these kinds of
things, so I am going to let know her.

Download Es file explorer -
Sunday, 15 October 2017 11:15 Comment Link

Someone essentially lend a hand to make severely articles I
would state. This is the very first time I frequented your
website page and up to now? I amazed with the research you made to create this particular post
amazing. Wonderful job!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>