1

When I follow this tutorial (http://phantomjs.org/screen-capture.html) to do a screen capturing, I got some problem about dynamic data visualization.

In that tutorial, it uses some code like:

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

But this seems work only with static page. I wonder if I have some some user interaction and make that page changed(like mouse click change color etc.), how can I make that capturing which show current screen?

If phantomjs can not work in this way, could anyone suggest some other solutions?

Artjom B.
  • 61,146
  • 24
  • 125
  • 222
Kuan
  • 11,149
  • 23
  • 93
  • 201

1 Answers1

1

Sure, just add the functionality you want after page.open() and before 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();
});

Keep in mind that you are working with Javascript here and that you can inject arbitrary helper scripts, like CasperJS or jQuery, and use their functionality on the loaded page.

For inspiration:

Community
  • 1
  • 1
Jens A. Koch
  • 39,862
  • 13
  • 113
  • 141
  • Thanks, but I did not quite catch you, currently the user interaction code is in index.html, most of them is DOM operation, I am wondering how can I move them into here? Could you show me a example like click a div and change its background to red and take that screen shot? – Kuan Jun 19 '15 at 16:48
  • You don't have to move them. Simply call the Javascript function of index.html from the PhantomJS screenshot script. – Jens A. Koch Jun 19 '15 at 16:51
  • I've added background color changing to my answer. For clicking an element (div), please read the other stackoverflow answers, because it's already described there. – Jens A. Koch Jun 19 '15 at 16:58