echartsconvert.zip

# PhantomJS在服务端生成ECharts图片 **主要功能：给定ECharts的option参数，生成ECharts图片，并以Base64字符串返回。** ## 1. PhantomJS 介绍 [PhantomJS](http://phantomjs.org/)是一个不需要浏览器的富客户端。 官方介绍：PhantomJS是一个基于 WebKit 的服务器端JavaScript API。它全面支持web而不需浏览器支持，支持各种Web标准：DOM处理，CSS选择器, JSON，Canvas，和SVG。 PhantomJS常用于页面自动化，网络监测，网页截屏，以及无界面测试等。 通常我们使用PhantomJS作为爬虫工具。传统的爬虫只能单纯地爬取html的代码，对于js渲染的页面，就无法爬取，如Echarts统计图。而PhantomJS正可以解决此类问题。 >我们可以这么理解PhantomJS，PhantomJS是一个无界面、可运行脚本的谷歌浏览器。 ### 1.1 PhantomJS下载安装 PhantomJS安装非常简单，官网[http://phantomjs.org/download.html](http://phantomjs.org/download.html)下载最新的安装包， 安装包有Windows，Mac OS X, Linux 64/32 bit，选择对应的版本下载解压即可使用，在下载包里有个example文件夹，里面对应了许多示例供参考。 为方便使用，我们将phantomjs添加至环境变量中。 windows： 右键我的电脑->属性->高级系统设置->高级->环境变量->用户变量/系统变量->Path=D:\phantomjs\bin; 或 cmd->set path=%path%;D:\phantomjs\bin linux: vi /etc/profile export PATH=$PATH:/usr/phantomjs/bin >注：linux虽然不需要其他的依赖包，但仍旧需要GLIBCXX_3.4.9和GLIBC_2.7，当然大多数linux是有这两个依赖包的。 ### 1.2 PhantomJS运行脚本 进入`example`文件夹，里面有个`hello.js`脚本： ```javascript "use strict"; console.log('Hello, world!'); phantom.exit(); ``` 通过`phantomjs hello.js`即可运行脚本hello.js ```bash phantomjs hello.js ``` > 控制台输出：Hello, world! ### 1.3 PhantomJS脚本参数 在`example`文件夹中有`arguments.js`脚本： ```javascript "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(); ``` 运行以下命令，其中(first second third)是参数： ```bash phantomjs arguments.js first second third ``` 控制台将输出： ```bash 0: arguments.js 1: first 2: second 3: third ``` ### 1.4 PhantomJS页面加载 创建`pageload.js`脚本： ```javascript "use strict"; var page = require('webpage').create(); page.open('https://www.baidu.com/', function () { page.render('baidu.png'); phantom.exit(); }); ``` 运行`phantomjs pageload.js`即可在同级目录下得到一张`baidu.png`的图片 >由于它的这个特性，PhantomJS 可以用来“网页截屏”，截取网页的快照，比如将网页、SVG存成图片，PDF等 >导出ECharts图片也是基于page.render此功能 ## 2. PhantomJS API PhantomJS除了有examples外，还有比较全面的API，官方地址[http://phantomjs.org/api/](http://phantomjs.org/api/) 主要包括： 1. Command Line Interface(命令行)：PhantomJS内置的一些命令行选项，比如设置编码`--output-encoding=encoding `、设置代理`--proxy=address`等等； 2. phantom Object(phantom对象)：phantom为实现各种接口，增加一个宿主对象(host object)，同时也是window的子对象。主要功能包括运行脚本路径`phantom.libraryPath`，phantom退出`phantom.exit(returnValue)`等等 3. Web Page Module(网页模块)：核心模块，该模块主要提供页面自动化，网页截屏等等功能。 4. Child Process Module(子进程模块)：PhantomJS调用子进程并通过stdin,stdout,stderr进行通信。_(to learn)_ 5. File System Module(文件系统模块)：读取和操作服务器系统目录和文件。 6. System Module(系统模块)：该模块可以获取命令行参数、环境变量、操作系统和PID信息。 7. Web Server Module(Web服务器模块)：内置web服务器提供http服务。 下面将介绍部分在`echarts-convert.js`中使用到的API，便于方便查看脚本 ### 2.1 phantom Object(phantom对象) 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或其他异常没有捕获，该事件将捕获错误信息。 ### 2.2 Web Page Module(网页模块) 首先必须引入此模块`var page = require('webpage').create();` 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) {}：页面错误监听，如果没有特殊需求，该监听一定要写，否则页面代码错误将无法捕获。 ### 2.3 File System Module(文件系统模块) 首先引入`var fs = require('fs');`模块 fs.workingDirectory：脚本运行目录，与phantom.libraryPath一样。 fs.exists(string)：文件是否存在。 fs.makeDirectory(string)：创建一个目录。 ### 2.4 System Module(系统模块) 首先必须引入`var system = require('system');`模块 system.args：返回命令行参数数组，第一个参数是脚本名，其他的是各个参数。 system.pid：正在运行的进程id。 ### 2.5 Web Server Module(Web服务器模块) 首先引入`var server = require('webserver').create();`模块 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连接 ### 2.6 自定义Module 在`examples`目录中，有`module.js`和`universe.js`两个脚本： `module.js`： ```javascript "use strict"; var universe = require('./universe'); universe.start(); console.log('The answer is ' + universe.answer); phantom.exit(); ``` `universe.js`： ```javascript "use strict"; exports.answer = 42; exports.sta