通过phantomjs 进行页面截图
本文章参考了使用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 url = 'http://yule.club.sohu.com/gifttrade/thread/2m2efbrpfui';
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(){
//此函数在目标页面执行的,上下文环境非本phantomjs,所以不能用到这个js中其他变量
window.scrollTo(0,10000);//滚动到底部
//window.document.body.scrollTop = document.body.scrollHeight; 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; /**
* 类名: DownLoad
* 包名: com.newsTest.weixin
* 作者: zhouyh
* 时间: 2014-9-10 下午04:19:46
* 描述: TODO(这里用一句话描述这个类的作用)
*/
public class DynamicDownLoad {
/**
*
* 方法名:getSrcContent
* 作者:zhouyh
* 创建时间:2014-9-10 下午06:57:32
* 描述:根据传入的url,调用phantomjs进行下载,并返回源码信息
* @param url
* @return
*/
public static String getSrcContent(String url){
//windows下phantomjs位置
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) {
// TODO 这里写异常处理的代码
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) {
// TODO 这里写异常处理的代码
e.printStackTrace();
} return sbf.toString();
} /**
* 方法名:main
* 作者:zhouyh
* 创建时间:2014-9-10 下午04:19:46
* 描述:TODO(这里用一句话描述这个方法的作用)
* @param args
* @throws IOException
*/
public static void main(String[] args){
// TODO Auto-generated method stub
String src = DynamicDownLoad.getSrcContent("http://weixin.sogou.com/gzh?openid=oIWsFt9MmzCvfJgaVxEUevPcuUCg");
System.out.println(src);
} }
补充:对于延迟截图,还是有个问题,就是无法监听ajax或者资源是否完整加载导致页面不全;解决方案,viewport设置一个比截图高度的矮,通过比较生产图片的高度来判断截取图片的结果
参考以下文章
http://blog.csdn.net/hwwzyh/article/details/39184905
最新文章
- Makefile笔记之一 ------ 变量的引用及赋值
- js模块开发(一)
- __thread关键字[转]
- Android安全之Https中间人攻击漏洞
- paip.提高效率---集合的存取括号方式 uapi java python php js 的实现比较
- HTML--5 JavaScript
- linux C(hello world)程序调试
- Reset / Validate Buffer
- [置顶] [BZOJ]2127: happiness 最小割
- SQL Server中Id自增列的最大Id是多少
- [LeetCode#191]Number of Bits
- 2.JQuery AJAX
- poj2231---暴力
- Java之模板方法模式(Template Method)
- Java面试常考------------------------垃圾收集算法
- 51Nod 1289 大鱼吃小鱼(模拟,经典好题)
- gradle入门(1-4)多项目构建实战
- 关于引用(python中的伪指针)的理解
- FSBPM 开发过程中一些提醒备注信息(供参考)
- [转载] Fiddler为所欲为第三篇 封包逆向必备知识[三]