如何使用 phantomjs 进行动态数据可视化截屏

Question

当我按照本教程 (http://phantomjs.org/screen-capture.html) 进行屏幕截图时，我遇到了一些关于动态数据可视化的问题。

在该教程中，它使用了如下代码：

var page = require('webpage').create();
page.open('http://localhost:8080/index.html', function() {
  page.render('screenshot.png');
  phantom.exit();
});

但这似乎只适用于静态页面。我想知道我是否进行了一些用户交互并更改了该页面（例如鼠标单击更改颜色等），如何我可以捕获显示当前屏幕？

如果 phantomjs 不能以这种方式工作，谁能提出其他解决方案？

Answer 1

当然，只需在page.open() 和page.render() 之前添加您想要的功能。

page.open('http://localhost:8080/index.html', function() {

  /**
   * Add your events and actions here...
   * or call JS functions of the page itself...
   */

  page.evaluate(function() {

    /**
     * Inject a <style text/css> tag in the head,
     * which set the bgcolor
     */  

      var style = document.createElement('style'),
      text = document.createTextNode('body { background: red }');
      style.setAttribute('type', 'text/css');
      style.appendChild(text);
      document.head.insertBefore(style, document.head.firstChild);

  });

  page.render('screenshot.png');
  phantom.exit();
});

请记住，您在这里使用的是 Javascript，您可以注入任意帮助脚本，例如 CasperJS 或 jQuery，并在加载的页面上使用它们的功能。

灵感：

• PhantomJS; click an element
• How to retrieve the ajax data whose loading requires a mouse click with PhantomJS or other tools
  • 请特别查看有关单击、单击后屏幕截图和 ajax 内容的答案：https://stackoverflow.com/a/18274644/1163786
• 浏览一下，然后截图：https://stackoverflow.com/a/17506213/1163786