在RaspberryPi中用CasperJS对网页元素截图

PhantomJS是一个无界面的WebKit服务器端的JavaScript API，可以用于页面自动化、网络监测、网页截屏。
它为了保证步骤先后，代码层次会比较吓人。
可以改用CasperJS，它也是基于前者，但步骤写起来整洁多了。
PhantomJS官网提供的包不能用于树莓派raspbian，需要下载源码重新(交叉)编译，
据说编译时间在派上是以天来计，所幸有同胞提供了自己编译好的：
https://github.com/spfaffly/phantomjs-linux-armv6l
而CasperJS官网的版本倒是可以直接用。
下下来后可以做个软链接：

ln -s `pwd`/bin/casperjs /usr/bin/casperjs

以便随地运行，phantomjs也一样。

然后输入phantomjs，如果没说是无效命令,输入casperjs，没说找不到phantomjs，就可以开始了。

注意运行权限：chmod +x /usr/bin/phantomjs

比如我要拿这个天气预报蓝色区域的截图：

先从网页上审查元素，得知它的class='t'，然后写个js：

var casper = require('casper').create();//一看便知
casper.start("http://www.weather.com.cn/weather1d/101280101.shtml");//一目了然

casper.waitForSelector('.t', function() { //等选择器内容找到后,
	this.captureSelector('weatherGZ.png', '.t');//对指定元素截图
	});
	
casper.run();//这时才运行从start()开始的步骤

然后运行：casperjs xx.js

顺利的话，可以看到截图已经按指定文件名保存下来：

这个例子运行起来可能会很慢，因为有很多第三方请求拖慢了速度，比如广告、统计之类的脚本，还可能遮挡页面，可以通过资源请求事件来阻止。

casper.options.onResourceRequested=function(self,data,network){
	//按域名关键字过滤请求，不符合的就终止
	isWhite=data.url.match(/weather.com/g) || data.url.match(/tq121.com/g);
	if(!isWhite)
		network.abort();
};

这样就快多了。

对于下图的天气事件：

如果只需要前3条，可以用casperjs.evaluate()在页面运行相应js代码来删除多余元素。

在前例的run()之前加上：

casper.waitForSelector('.greatEvent ul li', function() {
	this.evaluate(function() {
		var l=document.querySelectorAll('.greatEvent ul li');//查找所有符合选择器的元素
		for (var i=3;i<l.length;i++)//第三个之后的元素
			l[i].parentNode.removeChild(l[i]);删除
	});
});

casper.then(function() {
	this.captureSelector('event.png', '.greatEvent');
});	

如果只需爬文本，就不需加载图片：

casper.options.pageSettings={loadImages: false};

start()、then()、thenOpen()这些函数,并不是马上执行，应该是按先后顺序编排好步骤，等run()时才真正开始运行。