# 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
没有合适的资源?快使用搜索试试~ 我知道了~
资源详情
资源评论
资源推荐
收起资源包目录
phantomjs.zip (22个子文件)
phantomjs
echart
chartData
phantomjs 64.79MB
font
simhei.ttf 9.3MB
simsunb.ttf 16.27MB
msyh.ttc 18.74MB
msyhl.ttc 11.58MB
STKAITI.TTF 12.15MB
msyhbd.ttc 16.05MB
simsun.ttc 17.37MB
STXIHEI.TTF 9.32MB
STSONG.TTF 11.16MB
phantomjs_linux_arm
注意事项.txt 246B
phantomjs 52.08MB
phantomjs_linux
phantomjs 64.79MB
echartsconvert
echarts-convert.js 6KB
echarts-convert.js.bak 12KB
module
command.js 11KB
echarts.min.js 629KB
jquery-3.2.1.min.js 85KB
README.md 30KB
script
china.js 59KB
echarts.min.js 629KB
jquery-3.2.1.min.js 85KB
共 22 条
- 1
liang2xue1314
- 粉丝: 0
- 资源: 11
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- mmqrcode1714153659780.png
- Screenshot_2024-04-27-06-08-58-486_com.baidu.xin.aiqicha.jpg
- 基于Javaweb+Tomcat+MySQL的大学生公寓管理系统+sql文件.zip
- 实训作业基于javaweb的订单管理系统源码+数据库+实训报告.zip
- 多机调度问题贪心算法基于最小堆和贪心算法求解多机调度问题.zip
- 基于同态加密技术的匿名电子投票系统源码.zip
- Pyqt5项目框架-PyQt项目开发实践
- 基于C通过MQTT的智能农业大棚管理系统(本科毕业设计)
- python+CNN的网络入侵检测算法源码.zip
- js 实现记住密码功能 js.cookie.min.js
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论1