使用phantomjs对页面进行截图

本文章参考了使用phantomjs操作DOM并对页面进行截图需要注意的几个问题 及 phantomjs使用说明 这两篇文章，初次接触phantomjs的童鞋可以去看下这两篇原文

在学习中可以看下 phantomjs官方相关示例

phantomjs是一个无界面浏览器，可用于网页截图和前端自动化测试，基于webkit内核（也就是chrome使用的内核），并使用js编写业务脚本来请求、浏览和操作页面。

1、安装phantomjs

下载phantomjs（官网下载），选择自己需要的版本下载即可，我这里是在windows下使用的，下载后直接解压，为了方便我将包含phantomjs.exe的目标路径添加到了环境变量里面，后续使用比较方便。

安装完成后在cmd里面输入phantomjs --version即可查看phantomjs版本信息。

2、phantomjs使用

phantomjs有标准的入门文档可以参考，网上也有很多的资料可以查阅，在使用过程中根据自己的需要实际操作。

我们这里主要是对文章开头提到到第一篇文章的仿照实现，所以理论和相关的注意事项可以参考文章引用的第一篇文章。

操作界面中的DOM树主要使用使用

[java]  view plain copy

 

1. evaluate(function, arg1, arg2, ...) {object}  

在截图中如何将整个界面截图，有如下几种方法：

 

一个是使浏览器足够大，这样底部就显示了，可以设置viewPortSize很大：page.viewportSize = {width: 4800,height: 8000};
另一个是通过BOM方法操作滚动条，可以把滚动条滚动到一个很大的值，如：window.scrollTo(0,10000);也可以滚动到适应的高度：window.document.body.scrollTop = document.body.scrollHeight;

如何延迟截图，页面请求的资源，如图片、异步cgi、js等，返回的时间以及执行的长短都是不确定的，如果截图过早，可能很多空白区域，因此需要定时截图，在打开页面后，使用setTimeout来延迟截图

 

[javascript]  view plain copy

 

1. window.setTimeout(function () {  
2.         page.render("test.png");  
3.         phantom.exit();  
4.  }, 1000);  

完整的代码，请求搜狗搜索微信的公众账号信息，并对连接标记红框、延迟截图

 

 

[javascript]  view plain copy

 

1. var page = require('webpage').create();  
2. system = require('system');  
3. //var url = 'http://yule.club.sohu.com/gifttrade/thread/2m2efbrpfui';  
4. var address;  
5. if(system.args.length == 1){  
6.     phantom.exit();  
7. }else{  
8.     adress = system.args[1];  
9.     page.open(adress, function (status){  
10.     if (status != "success"){  
11.         console.log('FAIL to load the address');  
12.         phantom.exit();  
13.     }  
14.           
15.     page.evaluate(function(){  
16.         //此函数在目标页面执行的，上下文环境非本phantomjs，所以不能用到这个js中其他变量         
17.         window.scrollTo(0,10000);//滚动到底部  
18.         //window.document.body.scrollTop = document.body.scrollHeight;  
19.           
20.         window.setTimeout(function(){  
21.             var plist = document.querySelectorAll("a");  
22.             var len = plist.length;  
23.             while(len)  
24.             {  
25.                 len--;  
26.                 var el = plist[len];  
27.                 el.style.border = "1px solid red";  
28.             }  
29.         },5000);  
30.     });  
31.       
32.     window.setTimeout(function (){  
33.             //在本地生成截图  
34.         page.render("json2form.png");         
35.         console.log(page.content);         
36.         phantom.exit();  
37.     }, 5000+500);      
38.     });  
39. }  

 

这里附上java操作phantomjs的代码：

 

[java]  view plain copy

 

1. package com.newsTest.weixin;  
2.   
3. import java.io.BufferedReader;  
4. import java.io.IOException;  
5. import java.io.InputStream;  
6. import java.io.InputStreamReader;  
7.   
8. /** 
9.  * 类名： DownLoad 
10.  * 包名： com.newsTest.weixin 
11.  * 作者： zhouyh 
12.  * 时间： 2014-9-10 下午04:19:46 
13.  * 描述： TODO(这里用一句话描述这个类的作用)  
14.  */  
15. public class DynamicDownLoad {  
16.     /** 
17.      *  
18.      * 方法名：getSrcContent 
19.      * 作者：zhouyh 
20.      * 创建时间：2014-9-10 下午06:57:32 
21.      * 描述：根据传入的url，调用phantomjs进行下载，并返回源码信息 
22.      * @param url 
23.      * @return 
24.      */  
25.     public static String getSrcContent(String url){  
26.         //windows下phantomjs位置  
27.         String path = "D:/phantomjs-1.9.7-windows/";  
28.         Runtime rt = Runtime.getRuntime();  
29.         Process process = null;  
30.         try {  
31.             process = rt.exec(path + "phantomjs.exe D:/phantomjs-1.9.7-windows/test.js " + url.trim());  
32.         } catch (IOException e) {  
33.             // TODO 这里写异常处理的代码  
34.             e.printStackTrace();  
35.         }  
36.         InputStream is = process.getInputStream();  
37.         BufferedReader br = new BufferedReader(new InputStreamReader(is));  
38.         StringBuffer sbf = new StringBuffer();  
39.         String tmp = "";  
40.         try {  
41.             while((tmp = br.readLine())!=null){    
42.                 sbf.append(tmp);    
43.             }  
44.         } catch (IOException e) {  
45.             // TODO 这里写异常处理的代码  
46.             e.printStackTrace();  
47.         }  
48.           
49.         return sbf.toString();  
50.     }  
51.       
52.       
53.       
54.     /** 
55.      * 方法名：main 
56.      * 作者：zhouyh 
57.      * 创建时间：2014-9-10 下午04:19:46 
58.      * 描述：TODO(这里用一句话描述这个方法的作用) 
59.      * @param args 
60.      * @throws IOException  
61.      */  
62.     public static void main(String[] args){  
63.         // TODO Auto-generated method stub  
64.         String src = DynamicDownLoad.getSrcContent("http://weixin.sogou.com/gzh?openid=oIWsFt9MmzCvfJgaVxEUevPcuUCg");  
65.         System.out.println(src);  
66.     }  
67.   
68. }  

在使用中还有很多需要学习的地方，希望下次有机会可以深入的学习下phantomjs，附上截图照片