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