If you want to get screenshots of a web page, what do you do? You might want them to illustrate a new theme or to display in a gallery of your work.

Now that I've switched to using a Mac I was exploring Mac alternatives for this. One great one was Skitch, which lets you easily grab screen shots and mark them up. But what if you want to show more than you can see in your window, like to display a fairly tall web page?

I just found a great new tool, webkit2png. It works on any Mac with Mac OS X 10.5 Leopard or later. Just download the file, pull up a terminal window, and type something like:

  
python /Users/karen/screenshots/webkit2png http://www.drupal.org
  

... and you end up with three screenshots of the site, a full size shot, a thumbnail, and a shot clipped to just show what you can normally see in a window. The results for Drupal are posted below (who knew the front page was that long!!)

wwwdrupalorg-thumb.png

There are configuration options for the size of the window and the size of the result, like:

  
# screengrab google
webkit2png http://google.com/      

# bigger screengrab of google      
webkit2png -W 1000 -H 1000 http://google.com/ 

# just the thumbnail screengrab
webkit2png -T http://google.com/      

# just thumbnail and fullsize grab   
webkit2png -TF http://google.com/      
  
# save images as "foo-thumb.png" etc
webkit2png -o foo http://google.com/     

# full documentation
webkit2png -h | less                     
  

Links

Published in

Karen Stevenson

Thumbnail
Karen is one of Drupal's great pioneers, co-creating the Content Construction Kit (CCK) which has become Field UI, part of Drupal core.