Home > bash > taking a screenshot about a webpage

taking a screenshot about a webpage


You know the URL of a webpage and you want to take a screenshot of it. For instance you want a thumbnail about the webpage.


It can be done very nicely with PhantomJS.

What is PhantomJS?
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.” (source)

How to install PhantomJS?
Follow the instructions here. Under Ubuntu I compiled it from source to get the latest version. Note that it takes a lot of time (about 30 minutes). Under Manjaro I could install it via yaourt and it took 1 minute (and got the newest version). The good news is that installation is not a problem.

How to take a screenshot?
If you download the source, you get a lot of example scripts. One of them is called rasterize.js, and this is exactly what we need.

$ phantomjs rasterize.js 
Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]
  paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"
  image (png/jpg output) examples: "1920px" entire page, window width 1920px
                                   "800px*600px" window, clipped to 800x600

Example #1:

phantomjs rasterize.js http://raphaeljs.com/polar-clock.html clock.png

Example #2:

phantomjs rasterize.js https://www.reddit.com/ red.png

It produced an image with dimension 600×3304. It’s too narrow, let’s fix that.

Example #3:

phantomjs rasterize.js https://www.reddit.com/ red.png 1024px

Its dimension is 1024×2432. Looks much better.

Example #4:
The previous image was too high. Let’s take a photo of that part that would be visible on our screen. For this we need to clip a window.

phantomjs rasterize.js https://www.reddit.com/ red.png "1024px*768px"

Great. Now scale it down to get a thumbnail.

Scaling down an image to thumbnail size

$ phantomjs rasterize.js https://www.reddit.com/ screenshot.png "1024px*768px"
$ convert -resize 250 screenshot.png thumb.jpg

The command convert comes from the ImageMagick package. Here we resize the image to width 250px. Convert will keep the image ratio, i.e. it figures out the height value.


  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: