用PhantomJS轻松给网页截图

PhantomJS是一个带有JavaScript宿主环境的webkit引擎封装，它类似于一个浏览器，但并不自带图像输出，而是提供了一个命令行的环境，专门针对需要浏览器作为执行环境，而又不需要用户界面的情景。

利用PhantomJS这一点，我们可以打造一个网页截图或者缩略图生成工具。

本文的所有代码均来自http://ariya.ofilabs.com/2012/10/web-page-screenshot-with-phantomjs.html，如果您对其中的任何技术细节存在疑问，请以原文为准。

使用PhantomJS实际上就是在一个JavaScript环境当中执行脚本，只不过这里我们是有一个类似于浏览器的宿主环境的。因此一个截图的代码非常简单：

var page = require('webpage').create();
page.open('http://google.com', function () {
    page.render('google.png');
    phantom.exit();
});

这段代码非常简单，就是截取google的首页为图片。

而自PhantomJS的1.6版本起，PhantomJS又增加了额外的几个参数，其中对我们代码最有帮助的，一个是缩放因子，另一个则是图像的编码输出。因此，我们上面的代码又可写为：

var page = require('webpage').create();
page.open('http://google.com', function () {
    page.zoomFactor = 0.25;
    console.log(page.renderBase64());
    phantom.exit();
});

太好了。我们现在生成的就是一个大小为原网页1/4的缩略图了。附带一提的是，这里的图片数据是以base64编码直接输出到命令行当中的。这么做的好处是，我们如果在后台直接执行截图操作，传递给前台的可以直接是字节流，而不必再生成一个文件。磁盘操作是非常慢的，所以直接以字节流的形式传递给前台可以避免效率的下降。

其实我们如果有一个带有浏览器组件的GUI程序，也是可以做到截图的，但使用PhantomJS，有一点非常有利，即它的Linux版本无需窗口管理器，比如X11。因此，在亚马逊的EC2或者小型Linux主机上，这一方案的环境需求很小。