如何使用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 内容：
浏览一下，然后截图：

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

How to use phantomjs to take screen shot with dynamic data visualization

javascript

screenshot

phantomjs