PhantomJS在服务端生成ECharts图片

官方介绍：PhantomJS是一个基于 WebKit 的服务器端JavaScript API。它全面支持web而不需浏览器支持，支持各种Web标准：DOM处理，CSS选择器, JSON，Canvas，和SVG。
PhantomJS常用于页面自动化，网络监测，网页截屏，以及无界面测试等。

通常我们使用PhantomJS作为爬虫工具。传统的爬虫只能单纯地爬取html的代码，对于js渲染的页面，就无法爬取，如Echarts统计图。而PhantomJS正可以解决此类问题。

windows：
右键我的电脑->属性->高级系统设置->高级->环境变量->用户变量/系统变量->Path=D:\phantomjs\bin;
或
cmd->set path=%path%;D:\phantomjs\bin

linux:
vi /etc/profile
export PATH=$PATH:/usr/phantomjs/bin

"use strict";
console.log('Hello, world!');
phantom.exit();

phantomjs hello.js

"use strict";
var system = require('system');
if (system.args.length === 1) {
    console.log('Try to pass some args when invoking this script!');
} else {
    system.args.forEach(function (arg, i) {
        console.log(i + ': ' + arg);
    });
}
phantom.exit();

phantomjs arguments.js first second third

0: arguments.js
1: first
2: second
3: third

"use strict";
var page = require('webpage').create();
page.open('https://www.baidu.com/', function () {
    page.render('baidu.png');
    phantom.exit();
});

phantom.libraryPath：获取运行脚本路径，如该脚本的路径为"E:/phantomjs/examples/hello.js"，那么phantom.libraryPath=E:/phantomjs/examples，注意最后没有"/"。

phantom.exit()：结束phantom进程，脚本不写phantom.exit()时，phantom将不会自己退出，因此如非特殊场景必须增加退出功能。

phantom.onError = function (msg, trace) {}：全局异常监听，如果page.onError或其他异常没有捕获，该事件将捕获错误信息。

page.open(url,callback)：打开一个url并且加载页面，页面加载完毕后，执行回调函数callback。简单来说就是在phantom浏览器里中打开一个页面。此方法有几个重载函数，可以去官网查看。

page.close()：关闭页面，主要为了释放内存。

page.evaluate(function, arg1, arg2, ...)：评估即沙盒测试，在当前页面建立一个沙盒，在沙盒上做一些操作。该功能比较强大，可以用于无界面测试。

page.injectJs(filename)：将外部JavaScript文件注入到页面中。主要用于沙盒测试。

page.render(filename [, {format, quality}])：渲染也就是截图，生成图片或PDF，filename为路径，format包括PDF、PNG、JPEG、BMP等，quality图片质量为0-100。

page.renderBase64(format)：渲染生成图片的Base64字符串，format包括PNG、JPEG、GIF。

page.clipRect = {top: 0,left: 0,width: 400,height: 300}：截图范围，如果没有设置将截取全部页面。注：phantomjs默认的width为400

page.onConsoleMessage = function (msg, lineNum, sourceId){}：页面的控制台监听，用于测试时监听控制台信息。

page.onError = function (msg, trace) {}：页面错误监听，如果没有特殊需求，该监听一定要写，否则页面代码错误将无法捕获。

fs.workingDirectory：脚本运行目录，与phantom.libraryPath一样。

fs.exists(string)：文件是否存在。

fs.makeDirectory(string)：创建一个目录。

system.args：返回命令行参数数组，第一个参数是脚本名，其他的是各个参数。

system.pid：正在运行的进程id。

server.listen(port, function (request, response) {}：开启监听服务。

request 参数
request.method：请求方式'GET'或'POST'等等
request.url：请求地址，包括GET的参数
request.post：请求体，仅在'POST'和'PUT'时存在

response 参数
response.statusCode：http状态码
response.headers：http头部信息
response.write(data)：响应体写入数据
response.close()：关闭http连接

"use strict";
var universe = require('./universe');
universe.start();
console.log('The answer is ' + universe.answer);
phantom.exit();

"use strict";
exports.answer = 42;

exports.start = function () {
    console.log('Starting the universe....');
}

1. Web项目提供一个http服务，并公开此url地址，访问该地址可以获取Echarts统计图；
2. Java通过Runtime调用phantomjs脚本，并传入url和filename参数，相当于打开浏览器；
3. 使用page.open(url)打开该地址，相当于在浏览器中浏览访问；
4. 使用page.render(filename)生成图片，相当于截图保存；
5. Java读取filename图片文件File，将其转换成Base64字符串即可。

web项目不开发页面，利用Web Page Module模块中的沙盒，生成所需的页面。
查看ECharts的文档，统计图的创建主要是通过option(配置项和数据)来控制，因此可以通过option动态生成不同的统计图。

1. Java通过Runtime调用phantomjs脚本，传入ECharts的option和filename参数；
2. 使用page.open(about:blank)打开空页面；
3. 调用page.evaluate()在空页面上创建ECharts的Dom层和JavaScript代码；
4. 使用page.render(filename)生成图片；
5. Java读取filename图片文件File，将其转换成Base64字符串即可。

为解决多次开启进程带来的资源消耗提高性能，主要是减少phantomjs进程的多次打开与关闭，目前的解决思路有两种：
一、利用Child Process Module(子进程模块)，开启phantomjs进程时，同时启动Java进程作为子进程。通过共享的stdin,stdout,stderr进行通信。
二、利用Web Server Module(Web服务器模块)，开启web服务，java通过http请求发送数据并获取结果。

1. 使用server.listen()开启Web服务。
2. java通过url请求地址，并传入ECharts的option参数；
3. 使用page.open(about:blank)打开空页面；
4. 调用page.evaluate()在空页面上创建ECharts的Dom层和JavaScript代码；
5. 使用page.renderBase64(format)生成图片的Base64字符串；
6. response返回Base64数据。

在实际使用过程中会出现各种问题，待改进。

// 引入module
var system = require('system'), // 获取参数
    path = phantom.libraryPath,
    command = require(path + '/module/command.js');// 参数module

var commandParams = command
    .version('0.0.1')
    .option('-s, --server', 'provide echarts convert http server')
    .option('-p, --port <number>', 'change server port when add -s or --server', 9090)
    .option('-o, --opt <json>', 'add the param of echarts method [ eChart.setOption(opt) ]')
    .option('-t, --type <value>', 'provide file/base64 for image, default file', /^(file|base64)$/i, 'base64')
    .option('-f, --outfile <path>', 'add output of the image file path')
    .option('-w, --width <number>', 'change image width', '800')
    .option('-h, --height <number>', 'change image height', '400')
    .parse(system.args);

-s或--server：开启服务监听，如果开启服务端，则-o不生效，这也就意味不能使用脚本命令生成图片；
-p或--port：端口号，只有-s启用时生效，改变监听端口号；
-o或--opt：ECharts的option,这里是json字符串，最外层不加引号；
    示例：{title:{text:'ECharts示例'},tooltip:{},legend:{data:['销量']},xAxis:{data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']},yAxis:{},series:[{name:'销量',type:'bar',data:[5,20,36,10,10,20]}]}
-t或--type：生成类型file或base64，file是生成图片，base64是生成Base64字符串；
-f或--outfile：文件输出路径，只有--type=file时生效，如果不指定，则在脚本目录下创建一个tmp文件夹，将图片以时间戳为名字，保存到tmp目录下；
-w或--width：生成的图片宽度，默认800像素；
-h或--height：生成的图片高度，默认400像素。

GET或POST请求时，request的参数主要包括：

opt：与--opt等同，ECharts的option,这里是json字符串；
type：与--type等同，生成类型file或base64；
width：与--width等同，生成的图片宽度，默认800像素；
height：与--height等同，生成的图片高度，默认400像素。

// ***********************************
// Echarts转换器
// ***********************************
function Convert(params) {
    this.params = params || commandParams; // 参数命令
    this.external = {
        JQUERY3: path + '/script/jquery-3.2.1.min.js',
        ECHARTS3: path + '/script/echarts.min.js',
        ECHARTS_CHINA: path + '/script/china.js'
    }; // 外部js
}

/**
 * 初始化
 */
Convert.prototype.init = function () {
    var params = this.params;
    this.check(params);
    if (params.server) {
        this.server(params);
    } else {
        this.client(params);
    }
};

/**
 * 服务
 * @param params
 */
Convert.prototype.server = function (params) {
    var server = require('webserver').create(), // 服务端
        convert = this;

    var listen = server.listen(params.port, function (request, response) {
        /**
         * 输出
         * @param data
         * @param success
         */
        function write(data, success, msg) {
            response.statusCode = 200;
            response.headers = {
                'Cache': 'no-cache',
                'Content-Type': 'application/json;charset=utf-8'
            };
            response.write(convert.serverResult(data, success, msg));
            response.close();
        }

        //获取参数
        var args = convert.serverGetArgs(request);

        if (args.opt !== undefined) {
            var check = convert.serverCheckAndSet(params, args);

            if (check) {
                convert.client(params, write);
            } else {
                write("", false, "get image error,please check parameter [opt]");
            }
        } else {
            write("", false, "missing parameter [opt]");
        }

    });

    // 判断服务是否启动成功
    if (!listen) {
        this.error("could not create echarts-convert server listening on port " + params.port);
    } else {
        console.log("echarts-convert server start success. [pid]=" + system.pid);
    }
};

/**
 * 获取参数
 * @param request
 * @returns {{}}
 */
Convert.prototype.serverGetArgs = function (request) {
    var args = {};
    if ('GET' === request.method) {
        var index = request.url.indexOf('?');
        if (index !== -1) {
            var getQuery = request.url.substr(index + 1);
            args = this.serverParseArgs(getQuery);
        }
    } else if ('POST' === request.method) {
        var postQuery = request.post;
        args = this.serverParseArgs(postQuery);
    }
    return args;
};

/**
 * 解析参数
 * @param query 字符串
 * @returns {{}} 对象
 */
Convert.prototype.serverParseArgs = function (query) {
    var args = {},
        pairs = query.split("&");
    for (var i = 0; i < pairs.length; i++) {
        var pos = pairs[i].indexOf('=');
        if (pos === -1)
            continue;
        var key = pairs[i].substring(0, pos);
        var value = pairs[i].substring(pos + 1);
        // 中文解码，必须写两层
        value = decodeURIComponent(decodeURIComponent(value));
        args[key] = value;
    }
    return args;
};

/**
 * 访问渲染
 * @param params
 * @param fn
 */
Convert.prototype.client = function (params, fn) {
    var page = require('webpage').create(); // 客户端
    var convert = this,
        external = this.external,
        render,
        output;

    /**
     *  渲染
     * @returns {*}
     */
    render = function () {
        switch (params.type) {
            case 'file':
                // 渲染图片
                page.render(params.outfile);
                return params.outfile;
            case 'base64':
            default:
                var base64 = page.renderBase64('PNG');
                return base64;

        }
    };

    /**
     * 输出
     * @param content 内容
     * @param success 是否成功
     */
    output = function (content, success) {
        if (params.server) {
            fn(content, success);
            page.close();
        } else {
            console.log(success ? "[SUCCESS]:" : "[ERROR]:" + content);
            page.close();
            convert.exit(params);// exit
        }
    };

    /**
     * 页面console监听
     * @param msg
     * @param lineNum
     * @param sourceId
     */
    page.onConsoleMessage = function (msg, lineNum, sourceId) {
        console.log(msg);
    };

    /**
     * 页面错误监听
     * @param msg
     * @param trace
     */
    page.onError = function (msg, trace) {
        output(msg, false); // 失败,返回错误信息
    };

    // 空白页
    page.open("about:blank", function (status) {
        // 注入依赖js包
        var hasJquery = page.injectJs(external.JQUERY3);
        var hasEchart = page.injectJs(external.ECHARTS3);
        var hasEchartChina = page.injectJs(external.ECHARTS_CHINA);

        // 检查js是否引用成功
        if (!hasJquery && !hasEchart) {
            output("Could not found " + external.JQUERY3 + " or " + external.ECHARTS3, false);
        }

        // 创建echarts
        page.evaluate(createEchartsDom, params);

        // 定义剪切范围，如果定义则截取全屏
        page.clipRect = {
            top: 0,
            left: 0,
            width: params.width,
            height: params.height
        };

        // 渲染
        var result = render();
        // 成功输出，返回图片或其他信息
        output(result, true);
    });
};

1. page.open("about:blank")一个空页面；
2. page.injectJs引入外部js，jQuery和ECharts；
3. page.evaluate页面创建ECharts的Dom,并生成统计图；
4. page.clipRect定义截图范围；
5. page.render渲染生成图片；
6. output输出，命令行直接将结果打印到控制台，Web将输出到response。

/**
 * 创建eCharts Dom层
 * @param params 参数
 */
function createEchartsDom(params) {
    // 动态加载js，获取options数据
    $('<script>')
        .attr('type', 'text/javascript')
        .html('var options = ' + params.opt)
        .appendTo(document.head);

    // 取消动画,否则生成图片过快，会出现无数据
    if (options !== undefined) {
        options.animation = false;
    }

    // body背景设置为白色
    $(document.body).css('backgroundColor', 'white');
    // echarts容器
    var container = $("<div>")
        .attr('id', 'container')
        .css({
            width: params.width,
            height: params.height
        }).appendTo(document.body);

    var eChart = echarts.init(container[0]);
    eChart.setOption(options);
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="jquery.min.js"></script>
    <script src="echarts.min.js"></script>
    <script type="text/javascript">
        // 指定图表的配置项和数据
        var options = {
            title: {
                text: 'ECharts示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        
        // 取消options动画效果
        if (options !== undefined) {
            options.animation = false;
        }
    </script>
</head>
<body style="background-color: white;">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="container" style="width: 800px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var eChart = echarts.init(document.getElementById('container'));
        // 使用刚指定的配置项和数据显示图表。
        eChart.setOption(options);
    </script>
</body>
</html>

/**
 * 结果返回
 * @param data
 * @param success
 * @param msg
 */
Convert.prototype.serverResult = function (data, success, msg) {
    var result = {
        code: success ? 1 : 0,
        msg: undefined === msg ? success ? "success" : "failure" : msg,
        data: data
    };

    return JSON.stringify(result);
};

code：成功为1，失败为0；
msg: 成功为'success'，失败为'failure'或其他错误信息；
data: 数据，正确返回base64字符串或图片路径，失败为空字符串

{
  "code":1,
  "msg":"success",
  "data": "base64 string"
}

/**
 * 页面错误监听
 * @param msg
 * @param trace
 */
page.onError = function (msg, trace) {
    output("", false, msg); // 失败,返回错误信息
};

/**
 * phantomJs 全局异常监听
 * @param msg
 * @param trace
 */
phantom.onError = function (msg, trace) {
    var msgStack = ['Convert ERROR: ' + msg];
    if (trace && trace.length) {
        msgStack.push('TRACE:');
        trace.forEach(function (t) {
            msgStack.push(' -> ' + (t.file || t.sourceURL) + ': ' + t.line + (t.function ? ' (in function ' + t.function + ')' : ''));
        });
    }
    console.error(msgStack.join('\n'));
    phantom.exit(1);
};

1. 首先按照(1.1 PhantomJS下载安装)安装好PhantomJS；
2. 下载phantom.zip并将其解压；
3. 在`echarts-convert.js`同级目录下，运行命令` phantomjs echarts-convert.js -s `；
4. 如果控制台出现"echarts-convert server start success. [pid]=xxxx"则表示启动成功，默认端口9090；
5. Java通过HttpClient或URLConnection请求，url为http://localhost:9090；GET或POST请求，request参数为opt=optJson；

import java.io.IOException;
import java.text.ParseException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Map.Entry;

import org.apache.http.HttpEntity;
import org.apache.http.NameValuePair;
import org.apache.http.client.entity.UrlEncodedFormEntity;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.message.BasicNameValuePair;
import org.apache.http.util.EntityUtils;

public class EChartsConvertTest {

    public static void main(String[] args) {
         String url = "http://localhost:9090";
         // 不必要的空格最好删除，字符串请求过程中会将空格转码成+号
         String optJson = "{title:{text:'ECharts 示例'},tooltip:{},legend:{data:['销量']},"
         				+ "xAxis:{data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']},yAxis:{},"
         				+ "series:[{name:'销量',type:'bar',data:[5,20,36,10,10,20]}]}";
         Map<String, String> map = new HashMap<>();
         map.put("opt", optJson);
         try {
             String post = post(url, map, "utf-8");
             System.out.println(post);
         } catch (ParseException e) {
             e.printStackTrace();
         } catch (IOException e) {
             e.printStackTrace();
         }
     }
     
     // post请求
     public static String post(String url, Map<String, String> map, String encoding) throws ParseException, IOException {
         String body = "";
     
         // 创建httpclient对象
         CloseableHttpClient client = HttpClients.createDefault();
         // 创建post方式请求对象
         HttpPost httpPost = new HttpPost(url);
     
         // 装填参数
         List<NameValuePair> nvps = new ArrayList<>();
         if (map != null) {
             for (Entry<String, String> entry : map.entrySet()) {
                 nvps.add(new BasicNameValuePair(entry.getKey(), entry.getValue()));
             }
         }
         // 设置参数到请求对象中
         httpPost.setEntity(new UrlEncodedFormEntity(nvps, encoding));
     
         // 执行请求操作，并拿到结果（同步阻塞）
         CloseableHttpResponse response = client.execute(httpPost);
         // 获取结果实体
         HttpEntity entity = response.getEntity();
         if (entity != null) {
             // 按指定编码转换结果实体为String类型
             body = EntityUtils.toString(entity, encoding);
         }
         EntityUtils.consume(entity);
         // 释放链接
         response.close();
         return body;
     }
}