使用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);
	}

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






  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值