phantomJS区域截图及保存文本的简单例子

phantomJS区域截图只需要指定截图的上，左的起始位置，以及截图的宽高即可。

文本的处理，只需要在page.evaluate()函数中，通过dom选择器，选择到需要输出的文字内容即可，同时也可以写入本地文件中。

以csdn博客首页为例，来进行一个简单的截图和文本提取，比如需要首页的第一篇博客的截图和标题，代码如下：

var page = require('webpage').create();
var fs = require('fs');
//要打印的url地址
var address = 'http://blog.csdn.net/';
//存储文件路径和名称
var outputPng = './csdn/img.png';
var outputTxt = './csdn/data.txt'
//设置长宽
page.viewportSize = { width: 1280, height: 800 };

page.open(address, function(status) {
	if(status !== 'success') {
		console.log('Unable to load the address!');
		phantom.exit();
	} else {

		//截图的偏移和宽高
		page.clipRect = {
			top: 186,
			left: 101,
			width: 855,
			height: 207
		};

		text = page.evaluate(function() {
			var title = document.getElementsByClassName('blog_list_wrap')[0]
						.getElementsByClassName('csdn-tracking-statistics')[0].getElementsByTagName('a')[0].innerText;
			return title;
		});
		//此文本可以通过phantomjs指令输出到文件
		console.log("获得的分类统计数据为:"+ text);
		fs.write(outputTxt, text, 'w');
		console.log("获得的分类统计数据已保存至文件！");
		
		console.log("截图中......");
		page.render(outputPng);
		console.log("截图已保存对应路径！");
		
		phantom.exit();
	}
});

执行控制台打印日志为：

[[e-mail]]# phantomjs csdntest.js 
获得的分类统计数据为:Java 常用工具类 Collections 源码分析
获得的分类统计数据已保存至文件！
截图中......
截图已保存对应路径！

最终获得的截图及TXT文件为：

截图区域的选择，可以通过dom定位后，返回4个数值即可：

length = page.evaluate(function () {
	var div = document.getElementById('bar-chart-container'); //要截图的div的id
	var bc = div.getBoundingClientRect();
	var top = bc.top;
	var left = bc.left;
	var width = bc.width;
	var height = bc.height;
	window.scrollTo(0, 10000);//滚动到底部
	return [top, left, width, height];
});
console.log(length);
page.clipRect = { //截图的偏移和宽高
	top: length[0],
	left: length[1],
	width: length[2],
	height: length[3]
};