网页截屏
由于PhantomJS使用了一个真实的布局和渲染引擎-WebKit,因此它可以对一个网页进行截屏。因为PhantomJS可以在web页面上捕捉任何东西,所以它不仅可以用来转换带有CSS的HTML内容,还可以用来转换SVG、图像和画布元素。
下面的脚本演示了使用PhantomJS进行页面截屏的最简单的用法。它加载了GitHub的主页,然后将其保存为图片GitHub.png
。
var page = require('webpage').create();
page.open('http://github.com/', function() {
page.render('github.png');
phantom.exit();
});
要运行这个例子只需新建个名为github.js
的文件,然后将如上所示的代码复制、粘贴到文件中。最后在PhantomJs命令行窗口中执行命令:
phantomjs github.js
除了PNG格式,PhantomJS还支持JPEG、GIF和PDF格式。
在PhantomJS的examples
目录中,有一个名为rasterize.js的脚本。显示了一个更完整的PhantomJS的渲染特性。一个用于生成著名的Tiger(来自SVG)的示例
phantomjs rasterize.js http://ariya.github.io/svg/tiger.svg tiger.png
生成的图片tiger.png
如下所示:
另一个例子是生成极坐标时钟图片
phantomjs rasterize.js https://dmitrybaranovskiy.github.io/raphael/polar-clock.html clock.png
生成一个PDF文件也是很简单的, 例如将一篇维基百科的文章转为PDF格式文件:
phantomjs rasterize.js 'http://en.wikipedia.org/w/index.php?title=Jakarta&printable=yes' jakarta.pdf
您可以使用page的一些属性修改所截取屏幕的大小:
var page = require('webpage').create();
//viewportSize being the actual size of the headless browser
page.viewportSize = { width: 1024, height: 768 };
//the clipRect is the portion of the page you are taking a screenshot of
page.clipRect = { top: 0, left: 0, width: 1024, height: 768 };
//the rest of the code is the same as the previous example
page.open('http://example.com/', function() {
page.render('github.png');
phantom.exit();
});
画布可以很容易地被构造及转换成图像。 例子中包含一个名为colorwheel.js的脚本,可以生成如下色盘:
使用PhantomJS可以很轻松地构建一个web屏幕截图服务。可以在文档中的相关项目中找到很多类似的例子。