PhantomJS截图「这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战」 PhantomJS俗

「这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战」

PhantomJS俗称为：无界面的浏览器。PhantomJS是一个基于webkit的JavaScript API。它使用QtWebKit作为它核心浏览器的功能，使用webkit来编译解释执行JavaScript代码。就是无头浏览器，PhantomJS这款工具在Python爬虫中可是非常有名的。当然还有其他的无头浏览器。

目的

PhantomJS能实现的功能有很多，任何你可以在基于webkit浏览器做的事情，它都能做到。它不仅是个隐形的浏览器，提供了诸如CSS选择器、支持Web标准、DOM操作、JSON、HTML5、Canvas、SVG等，同时也提供了处理文件I/O的操作，从而使你可以向操作系统读写文件等。在这我是使用它来截图echarts生成的图表。

实施

可以从官网下载：phantomjs.org/download.ht…，JavaScript 标准参考教程（alpha）。

在examples文件夹里它写了很多demo的可以参考和借鉴。

1.先下载echarts文件

2.编写脚本代码，先引入模块并生成page,由于是从命令行输入所以需要获取system.args

var page = require('webpage').create();
var system = require('system');

var exportImg = system.args[1];
var data = JSON.parse(window.atob(system.args[2]));

在page.content中写html标签如：

image.png

是所有html的标签都写在这。

注入js：page.injectJs("./echarts.min.js");

然后需要在：page.evaluate中编写echarts配置项

image.png

最后保存成图片并退出

page.render(exportImg);
phantom.exit();

命令是：./phantomjs ./test.js [图片名称] [参数]。这样就生成图片了。

截图网页：

var page = require('webpage').create(),
    server = 'https://www.baidu.com';

page.open(server, function (status) {
    page.render('xx.png');
    phantom.exit();
});

这样就可以截图百度网页。还可以是使用var server = require('webserver').create();来启动一个服务并监听接收参数来渲染html并截图。

在demo中有很多的例子可以参考，这是一个比较有趣的工具可以服务端来生成报表的图片。这里说的比较浅，主要是长长见识，更多的查看demo和阮一峰的教程。