编 写：袁 亮
时 间：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文件夹下，有很多范例，直接参考使用，很好用