如何使用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