本文章参考了使用phantomjs操作DOM并对页面进行截图需要注意的几个问题 及 phantomjs使用说明 这两篇文章,初次接触phantomjs的童鞋可以去看下这两篇原文
在学习中可以看下 phantomjs官方相关示例
phantomjs是一个无界面浏览器,可用于网页截图和前端自动化测试,基于webkit内核(也就是chrome使用的内核),并使用js编写业务脚本来请求、浏览和操作页面。
1、安装phantomjs
下载phantomjs(官网下载),选择自己需要的版本下载即可,我这里是在windows下使用的,下载后直接解压,为了方便我将包含phantomjs.exe的目标路径添加到了环境变量里面,后续使用比较方便。
安装完成后在cmd里面输入phantomjs --version即可查看phantomjs版本信息。
2、phantomjs使用
phantomjs有标准的入门文档可以参考,网上也有很多的资料可以查阅,在使用过程中根据自己的需要实际操作。
我们这里主要是对文章开头提到到第一篇文章的仿照实现,所以理论和相关的注意事项可以参考文章引用的第一篇文章。
操作界面中的DOM树主要使用使用
- 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来延迟截图
 
- window.setTimeout(function () {  
-         page.render("test.png");  
-         phantom.exit();  
-  }, 1000);  
 
完整的代码,请求搜狗搜索微信的公众账号信息,并对连接标记红框、延迟截图
 
 
- var page = require(‘webpage‘).create();  
- system = require(‘system‘);  
- var address;  
- if(system.args.length == 1){  
-     phantom.exit();  
- }else{  
-     adress = system.args[1];  
-     page.open(adress, function (status){  
-     if (status != "success"){  
-         console.log(‘FAIL to load the address‘);  
-         phantom.exit();  
-     }  
-           
-     page.evaluate(function(){  
-         
-         window.scrollTo(0,10000);
-         
-           
-         window.setTimeout(function(){  
-             var plist = document.querySelectorAll("a");  
-             var len = plist.length;  
-             while(len)  
-             {  
-                 len--;  
-                 var el = plist[len];  
-                 el.style.border = "1px solid red";  
-             }  
-         },5000);  
-     });  
-       
-     window.setTimeout(function (){  
-             
-         page.render("json2form.png");         
-         console.log(page.content);         
-         phantom.exit();  
-     }, 5000+500);      
-     });  
- }  
 
 
这里附上java操作phantomjs的代码:
 
- package com.newsTest.weixin;  
-   
- import java.io.BufferedReader;  
- import java.io.IOException;  
- import java.io.InputStream;  
- import java.io.InputStreamReader;  
-   
- public class DynamicDownLoad {  
-     
-     public static String getSrcContent(String url){  
-         
-         String path = "D:/phantomjs-1.9.7-windows/";  
-         Runtime rt = Runtime.getRuntime();  
-         Process process = null;  
-         try {  
-             process = rt.exec(path + "phantomjs.exe D:/phantomjs-1.9.7-windows/test.js " + url.trim());  
-         } catch (IOException e) {  
-             
-             e.printStackTrace();  
-         }  
-         InputStream is = process.getInputStream();  
-         BufferedReader br = new BufferedReader(new InputStreamReader(is));  
-         StringBuffer sbf = new StringBuffer();  
-         String tmp = "";  
-         try {  
-             while((tmp = br.readLine())!=null){    
-                 sbf.append(tmp);    
-             }  
-         } catch (IOException e) {  
-             
-             e.printStackTrace();  
-         }  
-           
-         return sbf.toString();  
-     }  
-       
-       
-       
-     
-     public static void main(String[] args){  
-         
-         String src = DynamicDownLoad.getSrcContent("http://weixin.sogou.com/gzh?openid=oIWsFt9MmzCvfJgaVxEUevPcuUCg");  
-         System.out.println(src);  
-     }  
-   
- }  
 
在使用中还有很多需要学习的地方,希望下次有机会可以深入的学习下phantomjs,附上截图照片
 

 
使用phantomjs对页面进行截图
原文:http://www.cnblogs.com/firstdream/p/5119744.html