在Mac上通过Terminal截取网页全图 / Full Page Screenshots by Terminal On a Mac

Posted by Leask on November 6, 2009

其实很多人都知道,如果说Snow Leopard和Windows 7的图形界面是可口的点心的话,那么在*nix系统里面,命令行Shell简直就是系统的灵魂。

笔者是从事网站开发和设计的,俗称的D&D(Design and Development),经常遇到需要把制作效果汇报给上级,或者发Demo给客户的情况。然而由于Web pages脱离了Web server通常是无法完整预览的,这就需要截图了。

Mac上截图是很方便的,系统自带的截图功能就异常强大(和Windows上残废的截图功能无法类比),而且通过便利的热键就能使用。关键是Mac上的截图工具并不能截取网页的全图,也就是遇到你的网页尺寸大于你的浏览器窗口尺寸的时候,就无能为力了,难不成还要开个Photoshop来拼接?这样做很山寨,一点都不专业,而且效率相当低。于是我也尝试过使用Paparazzi和Little Snapper。说实话,这两个软件都是很优秀的,特别是华丽的Little Snapper,但是那就需要多安装一个软件了,有没有什么环保一点的办法呢?

经过一番研究,其实是有的,就是使用基于python的webkit2png,然而事实上Paparazzi和Little Snapper都是基于webkit2png项目的。
webkit2png可以在这里下载到:http://www.paulhammond.org/webkit2png/
如果你和我一样,有命令行癖,那么打开Terminal,使用CURL获取,命令如下:


curl http://www.paulhammond.org/2009/03/webkit2png-0.5/webkit2png-0.5.txt > webkit2png

于是你就得到webkit2png了。怎么用呢?
首先检查你的系统,你必须使用Mac OS X 10.2或以上系统,Safari 1.0或以上,PyObjC库1.1或以上。当然了,如果你的系统是Mac OS X 10.5 Leopard或更高版本,那么以上所有组件,你都已经安装过上了。如果不满足条件,可以升级Safari,并下载PyObjC的源代码自己编译。

webkit2png的使用很简单,Terminal执行:


python /Users/Leask/webkit2png https://leaskh.com/

执行效果如下:
Screen shot 2009-11-06 at 9.57.57 PM 
然后你就会发现网页已经被截图放在你的home文件夹了。

当然你还可以通过参数控制webkit2png的行为,你可以通过 --help 获得以下使用帮助:


Flora:~ Leask$ python /Users/Leask/webkit2png --help
Usage: webkit2png [options] [
http://example.net/ ...]

examples:
webkit2png
http://google.com/            # screengrab google
webkit2png -W 1000 -H 1000
http://google.com/ # bigger screengrab of google
webkit2png -T
http://google.com/         # just the thumbnail screengrab
webkit2png -TF
http://google.com/        # just thumbnail and fullsize grab
webkit2png -o foo
http://google.com/     # save images as "foo-thumb.png" etc
webkit2png -                             # screengrab urls from stdin
webkit2png -h | less                     # full documentation

Options:
  --version             show program's version number and exit
  -h, --help            show this help message and exit
  -W WIDTH, --width=WIDTH
                        initial (and minimum) width of browser (default: 800)
  -H HEIGHT, --height=HEIGHT
                        initial (and minimum) height of browser (default: 600)
  --clipwidth=WIDTH     width of clipped thumbnail (default: 200)
  --clipheight=HEIGHT   height of clipped thumbnail (default: 150)
  -s SCALE, --scale=SCALE
                        scale factor for thumbnails (default: 0.25)
  -m, --md5             use md5 hash for filename (like del.icio.us)
  -o NAME, --filename=NAME
                        save images as NAME-full.png,NAME-thumb.png etc
  -F, --fullsize        only create fullsize screenshot
  -T, --thumb           only create thumbnail sreenshot
  -C, --clipped         only create clipped thumbnail screenshot
  -d, --datestamp       include date in filename
  -D DIR, --dir=DIR     directory to place images into
  --delay=DELAY         delay between page load finishing and screenshot
  --noimages            don't load images

这里我就不一一翻译了。如果你懂一点Shell Script语言,还可以把这个命令再封装一下,例如我就把这个命令封装为:


websnap [URL]

的形式,很便利地得到截图,如输入:


websnap https://leaskh.com/

至于Shell Script怎么写?也不难,Unix和Linux上的Shell Script其实都大致一样,如:


#!/bin/bash
echo "Leask's WebSnap based on webkit2png"
echo ""
python /Users/Leask/webkit2png $1;
exit;

保存上面的代码片段为以websnap为名文件,注意以上的Leask为我的用户名,你还需要自己改为自己的用户名呢。放脚本的目录和脚本本身都需要有执行权限。

就先写这些吧,Enjoy。

// 如果你是Linux用户,你通常没有Webkit,那么你有Firefox就可以了,Google一下另外一个基于Mozilla Firefox的项目叫做khtml2png,和webkit2png大同小异。