nodejs+phantomjs+七牛 实现截屏操作并上传七牛存储

      近来研究了下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 filesphantomjs-2.1.1；

    其次，配置环境变量。将phantomjs解压后目录中的bin目录的路径（例如我本机bin目录的位置是：D:Program filesphantomjs-2.1.1in ）加到系统变量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={1024,height:800};//设置窗口的大小为1024*800；
// page.clipRect={top:0,left:0,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(/[
]/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',"
-----------------"+dateString+" "+timeString+"------------操作开始----------------------
",function(err){
                    //     if(err){console.log('fail')}
                    // });
                    fs.appendFileSync(__dirname+'/downloadUrl.txt',"
-----------------"+dateString+" "+timeString+"------------操作开始----------------------
",{encoding:'utf8'});
                }
                fs.appendFile(__dirname+'/downloadUrl.txt',JSON.stringify(signalArray)+'
',function(err){
                    if(err){console.log("fail")}
                });
                // fs.appendFileSync(__dirname+'/downloadUrl.txt',JSON.stringify(signalArray)+'
',{encoding:'utf8'});

                // if((count+1)==max){
                //     fs.appendFile(__dirname+'/downloadUrl.txt',"
-----------------"+dateString+" "+timeString+"------------操作结束----------------------
",function(err){
                //         if(err){console.log('fail')}
                //     });
                //     fs.appendFileSync(__dirname+'/downloadUrl.txt',"
-----------------"+dateString+" "+timeString+"------------操作结束----------------------

",{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的简单应用，如有意见和建议，欢迎广大朋友指出，谢谢！