因为 PhantomJS 使用了 WebKit 内核，是一个真正的布局和渲染引擎，它可以像屏幕截图一样捕获一个 web 界面。因为它可以渲染网页中的人和元素，所以它不仅用到 HTML，CSS 的内容转化，还用在 SVG，Canvas。可见其功能是相当强大的。 下面的例子就捕获了 github 网页的截图。上文有类似内容，不再演示。

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

除了 png 格式的转换，PhantomJS 还支持 jpg，gif，pdf 等格式。 测试样例 其中最重要的方法便是 viewportSize 和 clipRect 属性。 viewportSize 是视区的大小，你可以理解为你打开了一个浏览器，然后把浏览器窗口拖到了多大。 clipRect 是裁切矩形的大小，需要四个参数，前两个是基准点，后两个参数是宽高。 通过下面的小例子感受一下。

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://cuiqingcai.com/', function() {
  page.render('germy.png');
  phantom.exit();
});