通过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

转载于:https://www.cnblogs.com/samli15999/p/7778105.html

通过phantomjs 进行页面截图相关推荐

服务端实现对页面截图 - PhantomJs
版权声明 : 本文为博主原创文章,如需转载,请注明出处(https://blog.csdn.net/F1004145107/article/details/97786555) 目录 / 1 / 前言 ...
使用PhantomJS实现网页截图服务
使用PhantomJS实现网页截图服务 2015-12-12来源:Java教程人气:99 这是上半年遇到的一个小需求,想实现网页的抓取,并保存为图片.研究了不少工具,效果都不理想,不是显示太差了(Ca ...
【Chrome 调试技巧】教你一步不用安装插件就可以完成--电脑页面截图
在 Chrome 的调试打开的情况下按下 [ Ctrl] + [Shift] + [P] Mac: [⌘] + [Shift]+ [P] 这里我们点击full size screenshot 整张页 ...
页面截图导出为PDF，以及PDF强行截断分页问题的处理
页面截图导出为PDF,以及PDF强行截断分页问题的处理需求将页面内容截图导出为PDF文件,如果有高度过高的表格或图片,尽量不截断而是放在下一页展示. 思路 1.将需要导出的dom,都用一个特殊的类 ...
vue页面截图；H5页面截图；vue项目中将特定网页内容生成图片(截图)；html2canvas截图
功能: 1.兼容 PC 和 Mobile: 2.对指定的区域进行截取: 3.可以控制截图大小: 4.截图生成base64图片地址一.安装插件 npm install html2canvas --sa ...
使用Edge扩展工具（GoFullPage）实现整页面截图或生成PDF文件
如果在浏览网页时,有需要整个页面截图或导出PDF文件的需求,这里分享一个Edge浏览器的扩展插件:GoFullPage. 这个工具可以一键实现页面从上到下滚动并截取. 一.打开"管理扩展&q ...
selenium使用save_screenshot()进行页面截图
web自动化测试过程中页面截图相对比较简单,可以直接使用selenium自带的方法save_screenshot(). 示例:对百度首页整个页面进行截图. # coding = utf-8from s ...
vue实现移动端H5页面截图
vue实现移动端H5页面截图 1.vue使用html2canvas实现移动端H5页面截图并下载. 2.html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏.这个html2canva ...
vue如何给页面截图
在vue中如何实现页面截图并保存呢,有一个叫做html2canvas的插件可以实现这个功能,站内有个大佬发了使用方法详细看下面链接: vue中html2canvas的使用_GuaX的博客-CSDN博客 ...

通过phantomjs 进行页面截图

通过phantomjs 进行页面截图相关推荐

最新文章

热门文章