近来研究了下phantomjs,只是初涉,还谈不上深入研究,首先介绍下什么是phantomjs。

官网上的介绍是:”PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.”翻译过来就是:”PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API。它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。 ”   PhantomJS 可以用于页面自动化,网络监测,网页截屏,以及无界面测试等。

本文结合nodejs利用phantomjs网页截屏功能实现对多个URL进行批处理截图操作,并将图片上传至七牛服务器,批量获得图片下载地址后存储在本地文件。

下面就开始讲讲这个demo具体过程是怎么实现的。

一、安装

1、nodejs

关于nodejs的安装,在之前的文章中都有讲过,这里就不再赘述。具体可参见nodejs官网:https://nodejs.org/en/

2、phantomjs

关于phantomjs的安装,这里主要讲windows环境下的安装方式:

首先,进入官网 http://phantomjs.org/download.html 下载phantomjs压缩包,并解压至本地磁盘中,比如我本机上解压后存放的地址是:D:\Program files\phantomjs-2.1.1;

其次,配置环境变量。将phantomjs解压后目录中的bin目录的路径(例如我本机bin目录的位置是:D:\Program files\phantomjs-2.1.1\bin )加到系统变量Path变量中;

然后,打开cmd,输入 “phantomjs --version” 命令,查看phantomjs是否安装成功,如果出现版本号信息则说明安装成功,如果报错,那么你需要重启一下电脑。

结果如下所示:

二、设计思路

首先说说写这个demo的初衷。因为在工作中每次发邮件时需要用到一些截图,不想多个图片每次都自己手动去截取,所以就想用个自动化的批处理工具来自动截图,但是这样也仅仅是完成了截图,在使用的时候还是得上传图片,我还是觉得麻烦,所以就想截图完成后将这些图片自动上传到七牛服务器上,然后从服务器上获取图片下载地址,之后就可以直接使用图片的下载地址就ok了。下面是具体的设计思路。

针对上图中的截图器而言,具体的程序流程是:

三、编码

1、关于模拟生成Echarts图表的工程代码及启动方法,不详述,可参见我在github上发布的源码:https://github.com/zhunaoke/nodejs_phantomjs/tree/master/phantom_pic

2、截图器

2.1、capture.js

主要利用phantomjs进行截图操作

 var page=require('webpage').create();//创建一个网页对象;
 var system=require('system');
 var address,fileName;
 // page.viewportSize={width:1024,height:800};//设置窗口的大小为1024*800;
 // page.clipRect={top:0,left:0,width:1024,height:800};//截取从{0,0}为起点的1024*800大小的图像;
 // //禁止Javascript,允许图片载入;
 // // 并将userAgent改为"Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.31 (KHTML, like Gecko) PhantomJS/19.0";
 // page.settings={
 //     javascriptEnabled: false,
 //     loadImages: true,
 //     userAgent: 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.31 (KHTML, like Gecko) PhantomJS/19.0'
 // };

 if (system.args.length === 1) {
     console.log('Try to pass some args when invoking this script!');
     phantom.exit(1);
 }else{
     //获取指令传递的参数,参数是以数组的形式传递的;
     address=system.args[1];
     fileName=system.args[2];
     count=system.args[3];
     max=system.args[4];
     //打开一个网页;
     page.open(address,function(status){
         console.log(status);
         if(status==='success'){
             //成功后将页面存储为图片并放在指定的位置;
             page.render('./pictures/'+fileName+'.png');
         }
         // page.close();//释放;
         //退出;
         phantom.exit();
     });
 }

2.2、phantom.js

Nodejs开启新的子进程,发出phantomjs指令进行截图操作,截图成功后并发出上传图片的指令进行图片上传:

 /**
  * Created by Administrator on 2016/5/5.
  */
 var urls=["http://localhost:3000/","http://localhost:3000/table","http://www.baidu.com"];
 var count=0;
 var max=urls.length;
 if(urls.length!=0){
     capture(urls[0]);
 }
 //生成随机字符串作为图片名称;
 function createRandomName(len){
     len = len || 32;
     /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
     var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
     var maxPos = $chars.length;
     var pwd = '';
     for (i = 0; i < len; i++) {
         pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
     }
     return pwd;
 }
 //开始执行截图命令;
 function capture(url){
     var randomPicName='test'+createRandomName(Math.random()*8);
     console.log("获取的随机名称="+randomPicName);
     var spawn=require('child_process').spawn;
     var process=spawn('phantomjs',['capture.js',url,randomPicName,count,max],{cwd:'./routes/'});
     process.stdout.setEncoding('utf8');

     process.stdout.on("data",function(data){
         console.log(data);
         console.log("spawnSTDOUT:"+JSON.stringify(data));
         var code=data.replace(/[\r\n]/g,"");
         console.log(code);
         if(code=='success'){
             var execFile=require('child_process').execFile;
             var filePath='./pictures/'+randomPicName+'.png';
             var execProcess=execFile('node',['upload.js',filePath,randomPicName,count,JSON.stringify(urls)],{cwd:'./routes/'},
                 function(err,stdout,stderr){
                 console.log("execFileSTDOUT:", stdout);
                 console.log("execFileSTDERR:", stderr);
             });
         }
     });
     process.stderr.on('data',function(data){
         console.log("stderr"+data);
     });
     process.on('close',function(code){
         if (code == 1) {
             console.log('child process异常结束。目标:' + url);
         }
     });
     process.on('exit',function(code){
         console.log('child process exited with code ' + code);
         count++;
         if(count!=urls.length){
             capture(urls[count]);
         }
     });
 }

2.3、upload.js

主要是将图片上传至七牛并获取图片的下载地址,并将结果存储在本地txt文件中:

 /**
  * Created by Administrator on 2016/5/6.
  */
     var qiniu = require("qiniu");
     var config=require('./config');
     var argvs=process.argv.splice(2);
     var fs=require("fs");
     console.log(argvs);

 filePath=argvs[0];
 key=argvs[1]+'.png';
 //count;
 var count=parseInt(argvs[2]);
 //urls;
 var urls=JSON.parse(argvs[3]);
 var max=urls.length;
 console.log("get the arguments:"+filePath+"---"+key+"--"+count+"---"+max);
     /**
      * 第一步:初始化
      * @type {string}
      */
 //需要填写你的 Access Key 和 Secret Key
     qiniu.conf.ACCESS_KEY = config.qiniu.ACCESS_KEY;
     qiniu.conf.SECRET_KEY = config.qiniu.SECRET_KEY;
 //要上传的空间
     bucket = config.qiniu.Bucket_Name;

     /**
      * 第二步:获取上传的token
      * @param bucket
      * @param key
      */
 //构建上传策略函数,设置回调的url以及需要回调给业务服务器的数据
     function uptoken(bucket, key) {
         var putPolicy = new qiniu.rs.PutPolicy(bucket+":"+key);
         console.log("token= "+putPolicy.token());
         return putPolicy.token();
     }
     //生成上传 Token
     token = uptoken(bucket, key);
     /**
      * 第三步:上传图片
      * @type {string}
      */

 //构造上传函数
     function uploadFile(uptoken, key, localFile,count,max) {
         var extra = new qiniu.io.PutExtra();
         qiniu.io.putFile(uptoken, key, localFile, extra, function(err, ret) {
             if(!err) {
                 console.log("上传成功-------------------");
                 // 上传成功, 处理返回值
                 // console.log(ret.hash, ret.key, ret.persistentId);
                 //构建私有空间的链接
                 url = config.qiniu.Domain+ret.key;
                 var policy = new qiniu.rs.GetPolicy();
                 //生成下载链接url
                 var downloadUrl = policy.makeRequest(url);
                 //打印下载的url
                 console.log("downloadUrl= "+downloadUrl);
                 var date=new Date();
                 var dateString=date.toLocaleDateString();//日期;
                 var timeString=date.toLocaleTimeString();//时间;
                 var time=date.toLocaleDateString()+" "+date.toLocaleTimeString();
                 console.log(time);
                 var signalArray={
                     "编号":count+1,
                     "被截屏的路径地址":urls[count],
                     "上传七牛后的图片名称":key,
                     "下载地址":downloadUrl,
                     "截图时间":time
                 };
                 if(count==0){
                     // fs.appendFile(__dirname+'/downloadUrl.txt',"\r\n-----------------"+dateString+" "+timeString+"------------操作开始----------------------\r\n",function(err){
                     //     if(err){console.log('fail')}
                     // });
                     fs.appendFileSync(__dirname+'/downloadUrl.txt',"\r\n-----------------"+dateString+" "+timeString+"------------操作开始----------------------\r\n",{encoding:'utf8'});
                 }
                 fs.appendFile(__dirname+'/downloadUrl.txt',JSON.stringify(signalArray)+'\r\n',function(err){
                     if(err){console.log("fail")}
                 });
                 // fs.appendFileSync(__dirname+'/downloadUrl.txt',JSON.stringify(signalArray)+'\r\n',{encoding:'utf8'});

                 // if((count+1)==max){
                 //     fs.appendFile(__dirname+'/downloadUrl.txt',"\r\n-----------------"+dateString+" "+timeString+"------------操作结束----------------------\r\n",function(err){
                 //         if(err){console.log('fail')}
                 //     });
                 //     fs.appendFileSync(__dirname+'/downloadUrl.txt',"\r\n-----------------"+dateString+" "+timeString+"------------操作结束----------------------\r\n\n",{encoding:'utf8'});
                 // }
             } else {
                 // 上传失败, 处理返回代码
                 console.log(err);
             }
         });
     }
     //调用uploadFile上传,并返回下载地址;
     uploadFile(token, key, filePath,count,max);

2.4、执行:

先 npm install 安装需要的包,其次,直接输入“node routes/phantom.js”,回车,程序开始执行,下面来看看执行的结果:

2.4.1、/pictures目录下:

该目录下多了图片文件,这些就是phantomjs截图而来的图片;

2.4.2、七牛服务器

网页登陆七牛后,在我自己的bucket中可以看到,新增了很多图片文件,表示我们上传成功了:

2.4.3、本地downloadUrl.txt文件

然后我们测试下下载地址是否能正确下载图片:

以上就是整个利用nodejs+phantomjs+七牛 实现截图操作,将截图上传七牛并将下载地址存储在本地磁盘的做法。

PS:但是,有个问题就是,七牛的token设置了有效期,也就说时效过去后,之前的url就不能用了,可以再重新上传一次,或者直接在七牛上下载之前的图片。

如果有需要源码的小伙伴们可以在我github上进行下载,下载地址是:

Phantomjs_pic工程(生成echarts图表等):https://github.com/zhunaoke/nodejs_phantomjs/tree/master/phantom_pic

phantomjsScreenCapture工程(实现截图并上传图片):https://github.com/zhunaoke/nodejs_phantomjs/tree/master/phantomScreencapture

ps:此次只是对phantomjs的简单应用,如有意见和建议,欢迎广大朋友指出,谢谢!

nodejs+phantomjs+七牛 实现截屏操作并上传七牛存储的更多相关文章

  1. iOS 中捕获截屏操作

    转自:iOS知识小集 在iOS 7后,苹果提供了UIApplicationUserDidTakeScreenshotNotification通知来告诉App用户做了截屏操作.苹果的描述如下: // T ...

  2. selenium webdriver 截屏操作

    有时候我们需要进行截屏操作,特别是遇到一些比较重要的页面信息(出现错误)或者出现不同需要进行对比时, 我们就需要对正在处理的页面进行截屏! 未经作者允许,禁止转载! package test_wait ...

  3. UEditor+七牛,实现图片直连上传

    最近做的项目,涉及到使用富文本编辑器,我选择了百度的UEditor.同时,我们的图片放在七牛云存储上.关于这两者间的集成,我写下一些个人的经验,与大家分享. 图片上传方案 目前来说,Web端基于七牛等 ...

  4. vue-element:文件上传七牛之key和异步的问题

    效果图: html 代码: <el-form-item label="Excel文件" :label-width="formLabelWidth" pro ...

  5. 【nodejs】--express的中间件multer实现图片文件上传--【XUEBIG】

    Multer是nodejs中处理multipart/form-data数据格式(主要用在上传功能中)的中间件.该中间件不处理multipart/form-data数据格式以外的任何形式的数据 Tips ...

  6. jm解决乱码问题-参数化-数据库操作-文件上传下载

    jm解决乱码问题-参数化-数据库操作-文件上传下载 如果JM出果运行结果是乱码(解决中文BODY乱码的问题) 找到JM的安装路径,例如:C:\apache-jmeter-3.1\bin 用UE打开jm ...

  7. 初试“七牛云”--零基础运用七牛云配合UEditor实现图片的上传和浏览(.NET篇)

    (注册和建立存储空间就不介绍了,网上一把一把的资料,自己试着点点也能明白) 作为一个成熟的菜鸟,如果遇到一个新问题,第一步当然是先百度一下... 看了N个关于七牛云的使用的帖子,表示还是蒙圈的,看懂了 ...

  8. 如何利用”七牛云”在UEditor实现图片的上传和浏览

    在学习之前,我参考了朋友些的一篇关于这个功能实现的文章,非常不错.大家可以参考:http://www.cnblogs.com/John-Marnoon/p/5818528.html#3501846 里 ...

  9. 使用python操作FTP上传和下载

    函数释义 Python中默认安装的ftplib模块定义了FTP类,其中函数有限,可用来实现简单的ftp客户端,用于上传或下载文件,函数列举如下 ftp登陆连接 from ftplib import F ...

随机推荐

  1. Singleton模式——对象创建型模式

    Singleton模式即为单例模式/单件模式. (一)意图--保证一个类仅有一个实例,并提供一个访问它的全局访问点. 如一台计算机可以有多个端口,但是应该统一管理这些端口,避免访问冲突.--选择Sin ...

  2. 上国际网络——通过配置host

    http://laod.cn/hosts/2016-google-hosts.html

  3. yii 中设置提示成功信息,错误提示信息,警告信息

    方法一: <?php Yii::app()->user->setFlash(‘success’,”Data saved!”); 设置键值名为success的临时信息.在getFlas ...

  4. 解读zookeeper的配置项

    zookeeper的默认配置文件为zookeeper/conf/zoo_sample.cfg,需要将其修改为zoo.cfg.其中各配置项的含义,解释如下: 1.tickTime:CS通信心跳数 Zoo ...

  5. win7禁止自动使用浏览器打开FTP而是用资源管理器

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\ftp] @="URL:File Transfer Protocol" ...

  6. HQL查询

    HQL ,Hibernate Query Language ,是Hibernate查询语言,不直接操作数据表,而是操作实体类,根据实体类和对应数据表中的映射关系,查找数据. 下面是hql的基本步骤: ...

  7. (二)----HTTP请求头与响应头

    一.HTTP头引入: 正确的设置HTTP头部信息有助于搜索引擎判断网页及提升网站访问速度.通常HTTP消息包括:客户机向服务器的请求消息和服务器向客户机的响应消 息.客户端向服务器发送一个请求,请求头 ...

  8. 用Pyton玩转数据练习题---第二周

    找前5个默尼森数.P是素数且M也是素数,并且满足等式M=2**P-1,则称M为默尼森数.例如,P=5,M=2**P-1=31,5和31都是素数,因此31是默尼森数. # coding:utf-8 im ...

  9. HIVE中IN的坑

    问题:为什么HIVE中用了 NOT IN,结果集没了? 注:这个是原创,转载请注明,谢谢!直接进实验室>> > select * from a;OK1 a12 a23 a3Time ...

  10. QQ的成功,远没有你想象的那么顺利和轻松

    本文来自公众号“傅老师”(ID:fustory)的原创分享,感谢作者. 1.引言 如果QQ是一个人,看似风光,其实从出生到成长,过程饱经错荡,堪算坎坷.它的人生历程确实也够励志的了.   学习交流: ...