使用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,附上截图照片
使用phantomjs对页面进行截图的更多相关文章
- 通过phantomjs 进行页面截图
本文章参考了使用phantomjs操作DOM并对页面进行截图需要注意的几个问题 及phantomjs使用说明 这两篇文章,初次接触phantomjs的童鞋可以去看下这两篇原文 在学习中可以看下 pha ...
- 利用PIL和Selenium实现页面元素截图
预备 照张相片 selenium.webdriver可以实现对显示页面的截图: from selenium import webdriver dr = webdriver.Firefox() dr.g ...
- 章节十四、5- web页面的截图
一.以雅虎网站为例,当我们在登录时,输入错误的用户名然后点击“下一步”,用户名输入框会提示红色字体,这个时候我们就将页面进行截图. http://commons.apache.org/proper/c ...
- 使用phantomjs操作DOM并对页面进行截图需要注意的几个问题
phantomjs是一个无界面浏览器,可用于网页截图和前端自动化测试,基于webkit内核(也就是chrome使用的内核),并使用js编写业务脚本来请求.浏览和操作页面.最近前端监控需要用到phant ...
- centos下利用phantomjs来完成网站页面快照截图
最近研究了下phantomjs,感觉还是非常不错的. 首先到官网下载一个源码包 http://phantomjs.org/download.html 点击源码包下载如图: 然后在linux下将必要的一 ...
- phantomjs 抓取、截图中文网站乱码的问题的解决
用phantomjs抓取html乱码的解决方案: phantomjs --output-encoding=gbk test.js http://webscan.360.cn/index/checkwe ...
- 使用PhantomJS后台web界面截图
自动化截web页面的图 一.工具介绍: PhantomJS是一个基于webkit的JavaScript API.它使用QtWebKit作为它核心浏览器的功能,使用webkit来编译解释执行JavaSc ...
- Chrome不安装插件实现页面长截图
1.打开需要截图的页面,按F12进入审查模式 或直接在页面右击鼠标右键-检查,打开如下窗口 2.在控制台中按下 ctrl+shift+p,弹出如下输入框 3.输入screen进行模糊查找,选择“Ca ...
- Python-Flask框架之"图书管理系统"项目,附详解源代码及页面效果截图
该图书管理系统要实现的功能如下: 1. 可以通过添加窗口添加书籍或作者,如果要添加的作者和书籍已存在于书架上, 则给出相应的提示: 2. 如果要添加的作者存在,而要添加的书籍书架上没有,则将该书籍添加 ...
随机推荐
- javascript 柯里化
先看一下代码 function add(){ var sum=0; for(var i=0;i<arguments.length;i++){ sum+=arguments[i]; } retur ...
- C# this指针用法
this指针是什么: 这里有一些面向对象编程的概念需要说明:类(Class)的概念和对象(Object)的概念类是对事物概括,也是C#编码时所有代码归属的基本单位:而对象是对类的实例化,也就是C#里n ...
- hdu 1222 狼和兔子
Description There is a hill with n holes around. The holes are signed from 0 to n-1. A rabbit must h ...
- 转载---linux运维相关
前段时间,我在准备面试的时搜到的一套Linux运维工程师面试题,感觉比较全面,一直保存在草稿,刚在整理后台时翻了出来,干脆就发出来好了,以备不时之需. 1.linux如何挂在windows下的共享目录 ...
- substr,mb_substr,iconv_substr,array_slice
通过一个例子来看其关系 /** +---------------------------------------------------------- * 字符串截取,支持中文和其他编码 +----- ...
- NOIP2015 心得
NOIP2015的复赛已经过去一个多星期了,成绩也已经出来了,作为一个大(ruo)山(sheng)东的蒟蒻,在学了一年之后拿到了255的成绩.这个成绩并不是很好,但也算在我的预料之内. 第一天第一题水 ...
- 回溯(su)算法之N皇后问题
这里回溯算法还要好好研究一下 试探一个位置是否有效,如果有效,试探下一个位置(DFS),如果无效则回退 1.定义一个解空间,存放一个解的空间 2.DFS(暂且认为是DFS) 这里N皇后用的是递归+回溯 ...
- 三大主流开源硬件对比:Arduino vs BeagleBone vs Raspberry Pi
个人总结: Arduino就是个AVR单片机,个人觉得更适合玩电子的,社区也很活跃. BeagleBone是ARM Cortex-A8,属于嵌入式,价格高于Pi,但是许多方面拥有超越 Pi 的优 势, ...
- struts2传map到前台出现的问题
后台打印出的错: 2016-08-16 13:42:52.652 WARN org.apache.struts2.json.JSONWriter - JavaScript doesn't s ...
- Netty4.x中文教程系列(三) ChannelHandler
Netty4.x中文教程系列(四) ChannelHandler 上一篇文章详细解释了Hello World示例的代码.里面涉及了一些Netty框架的基础. 这篇文章用以解释ChannelHandl ...