首页 > Web开发 > 详细

使用phantomjs对页面进行截图

时间:2016-01-11 00:01:46      阅读:399      评论:0      收藏:0      [点我收藏+]

本文章参考了使用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 plaincopy
 
  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 plaincopy
 
  1. window.setTimeout(function () {  
  2.         page.render("test.png");  
  3.         phantom.exit();  
  4.  }, 1000);  

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

 

 

[javascript] view plaincopy
 
  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 plaincopy
 
  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,附上截图照片

 

技术分享

 

使用phantomjs对页面进行截图

原文:http://www.cnblogs.com/firstdream/p/5119744.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!