用casperjs截取任意网页区域

随着网络技术的发达,我们越来越多的用到截图功能。windows上面有非常人性化的QQ截图。浏览器里也有方便的截图插件。今天宝哥来教你怎么用代码截取网页存为图片。这对于一些出于各种目的写自动化脚本的,还有一些Linux用户来说,还是很需求的。而且,即使是windows用户,对一个网页需要滚屏才能显示完的内容来说,要用截图工具来边滚边截还是很(Mei)有(You)难(Ke)度(Neng)的。

phantomjs有个api,就是专门做截图的。但它只能截取网页和指定区域截图,而有个非常常见的需求就是,我想截网页中的一块正文区域或者某块特定的区域,但我又不想去算它的坐标和长宽,怎么办?没关系,casperjs帮我们封装了。它有casper.captureSelector这个api。我写了个支持命令行参数的casperjs脚本,放在了MagicScripts,叫capture.js

用法

casperjs /path/to/capture.js page_url filename.png [selector]

  • 首先,你肯定要安装casperjs
  • 第一个参数是网页的网址
  • 第二个截取屏幕后的存储的文件名
  • 第三个参数是选择器,比如'.main','.content','#data-list'之类的(支持CSS3选择器)。此参数是可选的,如果指定了,就只会截取该选择器命中的区域。否则,就截取整个网页。

感兴趣的可以点前面的链接前往git上查看代码。如果有自定义需求(比如,支持指定坐标区域截图),可以fork代码自由定制。