geekman

编	写：袁	亮
时	间：2015-07-21
说	明：PhantomJS第一篇：安装及抓取网页为图片

一、是什么，解决什么问题
	1、是一个无界面的，webkit内核浏览器，能像一个真正的浏览器一样解析js，dom，css等
	2、应用场景
		抓取js后加载的内容
		将完整页面转为图片
		屏幕补抓
		自动化测试
		网络监控
	
二、下载安装：linux版
	1、2.0.0版本之前的，直接网上下载编译后的二进制文件即可，直接解压就可以运行
		如果找不到好的下载源，直接上249上，有1.4版本和1.9.8版本
		/opt/software/下
	2、源码安装
		2.1 下载源码
			a：直接下载某个版本
				wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.0.0-source.zip
				unzip phantomjs-2.0.0-source.zip
			b：git下载全部
				git clone git://github.com/ariya/phantomjs.git
				cd phantomjs
				git checkout 2.0
			c:下载太慢，直接从249上拷贝
				/opt/ci123/www/html/phantomjs
		2.2 安装依赖的模块
			yum -y install gcc gcc-c++ make flex bison gperf ruby \
			openssl-devel freetype-devel fontconfig-devel libicu-devel sqlite-devel \
			libpng-devel libjpeg-devel
		2.3 执行安装脚本（以小时记，好久好久...）
			./build.sh
	3、参考文档
		http://phantomjs.org/build.html
	4、执行方法
		./bin/phantomjs examples/post.js
			
三、下载安装：windows版本
	1、自行搜索下载
		http://phantomjs.org/download.html
	2、18上有2.0.0版本
		\\192.168.0.18\运维网络硬盘\r软件\phantomjs-2.0.0-windows.zip
	3、解压出来之后，可以直接运行
	4、命令行下执行：
		cd 到相应目录
		./bin/phantomjs.exe examples/post.js
		
四、简单使用，抓取一个网页，并保存为图片
	1、新建fetch.js文件
	2、输入以下代码
		var page = require('webpage').create();
		page.open('http://www.ci123.com/', function() {
			page.render('/opt/ci123/www/html/geekman/ci123.png');
			phantom.exit();
		});
	3、执行，并查看图片是否生成
		./bin/phantomjs fetch.js
		
五、遇到的问题及解决办法
	1、网页中的中文乱码，中文的地方，都是一堆方括号
		yum install bitmap-fonts bitmap-fonts-cjk
		ps:这个解决了乱码问题，但是导致了下面另外一个问题，坑了我大半天
	2、生成的png有一堆的透明效果
		www.ci123.com加使用美图看看导致，其实是正常的
		放在浏览器里看就正常了
	3、生成jpg格式图片，背景黑色
		执行之后，将body背景设置为白色即可
		page.evaluate(function(){
			document.body.bgColor = 'white';
		});
	4、有些内容后加载，导致页面有空白
		延时一定时间之后在渲染成图片
		window.setTimeout(function (){
			page.render("/opt/ci123/www/html/geekman/ci123.png");
			phantom.exit();
		}, 3000);
	5、有些内容，需要触发效应效果才出现，可以在page.evaluate中模拟
		page.evaluate(function(){
			document.body.bgColor = 'white';
			
			window.scrollTo(0,10000);//滚动到底部
			window.document.body.scrollTop = document.body.scrollHeight;
		});
	6、flash播放显示的内容，截取不到
		1.5版本之后就不再支持flash，如果要抓取flash的，需要安装1.4及之前的版本
	7、生成的图片，宽度不够，比如www.ci123.com大概只有960的样子
		设置webkit的宽高，让样式显示正常（可以调整这个的不同值，来抓取不同分辨率下的表现，特别是响应式布局的页面）
		page.viewportSize = {width: 1440,height: 800};
	8、在window下抓取，页面显示正常，但是在linux下抓取，页面排版跟浏览器上显示的有很大的区别
		8.1 版本一致，怀疑是版本的问题，装过1.4，1.5，1.9.2，1.9.8，2.0.0版本，都没用...
		8.2 百度、google了很久，发现别人都没这个问题
		8.3 怀疑是不是webkit内核不一样，所以在我的浏览器里正常，在服务器上的那个不一样，看过使用的webkit内核，是比较旧
			然后又是各种切换版本，测试，发现还是不行
		8.4 后来仔细看截出来的图，发现汉字跟浏览器里不大一样，怀疑是这个的问题
		8.5 将最开始安装的那两个中文字库删除，再截，发现，汉字乱码了，但是排版正常....
			所以问题就确定了，因为使用了不当的字体库，导致页面排版出错
		8.6 重装centos的字体库，又踩了个坑，这个见额外的文档

六、完整代码范例
	var page = require('webpage').create();
	page.viewportSize = {width: 1440,height: 800};
	var url = 'http://www.ci123.com/';
	page.open(url, function (status){
		if (status != "success")    {
			console.log('FAIL to load the address');
			phantom.exit();
		}

		var bb = page.evaluate(function()    {
			document.body.bgColor = 'white';

		// //此函数在目标页面执行的，上下文环境非本phantomjs，所以不能用到这个js中其他变量
			window.scrollTo(0,10000);//滚动到底部
			window.document.body.scrollTop = document.body.scrollHeight;
		});

		window.setTimeout(function (){
			page.render("/opt/ci123/www/html/geekman/ci123.png");
			phantom.exit();
		}, 3000);
	});
		
七、其他
	1、1.5版本之后不支持flash，如果要支持flash的话，请下载1.4以前的版本
	2、常用语法
		http://www.tuicool.com/articles/nieEVv
		http://www.cnblogs.com/justany/p/3279717.html
	3、官方文档
		http://phantomjs.org/documentation/
	4、examples文件夹下，有很多范例，直接参考使用，很好用