通过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); } }
View Code
补充：对于延迟截图，还是有个问题，就是无法监听ajax或者资源是否完整加载导致页面不全；解决方案，viewport设置一个比截图高度的矮，通过比较生产图片的高度来判断截取图片的结果
参考以下文章
http://blog.csdn.net/hwwzyh/article/details/39184905