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主机上,这一方案的环境需求很小。

About liuyanghejerry

富有激情的前端工程师,专注GUI开发。

One Thought on “用PhantomJS轻松给网页截图

  1. Pingback: daliy record | Web开源笔记-专注Web开发技术,分享Web开发技术与资源

Post Navigation