How to use phantomjs to create site/url snapshot thumbnail

PhantomJS in a scriptable webkit written by Ariya Hidayat. Chrome and Safari are based on webkit. This is the formal definition as per the official site:

PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

There are lots of things which can be done with PhantomJS including testing,  automation, etc. This article I’ll create a screenshot of a web page and resize it to a thumbnail. I’m using Mac for creating the thumbnail, but you should be able to use Ubuntu or any other Linux as well.

Installing PhantomJS

Capture screen from url

Here is the code which opens a webpage and renders it to a png img. This code snippet based on example code from github phantonjs page. Save the following code to a file screen_capture.js and replace the url with the url you want to capture.

var page = require('webpage').create();
page.viewportSize = { width: 1024, height: 768 };
page.open('http://dev.infoheap.com/', function () {
  page.clipRect = {top:0, left:0, width:1024, height:1024};
  page.render('site.png');
  phantom.exit();
});

Here is the command to run it:

phantomjs screen_capture.js

This will create site.png image.

Resize the image using convert

Use command line utility convert to resize the image. Here is the command:

convert site.png -resize 100x100 site_thumbnail.png

Here is the outcome for url http://dev.infoheap.com/:
infoheap-site-thumbnail

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments