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?
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
phantomjs rasterize.js http://raphaeljs.com/polar-clock.html clock.png
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.
phantomjs rasterize.js https://www.reddit.com/ red.png 1024px
Its dimension is 1024×2432. Looks much better.
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
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.