CODEWITHSUNDEEP
javascriptnode.jsphantomjscasperjs
olefrank
olefrank

Reputation: 6820

Capture screen shot of lazy loaded page with Node.js

I'm looking for a way to take a screenshot of a long web page every time it changes. I would like to use Node.js for this. My question is about how to render the full page with images and save it to disk ad an image file.

Most images on the webpage is lazy loaded. So I guess that I need to scroll down the entire page first, before taking a screen shot.

I tried different tools:

All of them seems way too complicated, if not impossible, to even install. I didn't succeed with any of them.

casperjs seems like a really nice choice, but I can't get it to work within node.js. It keeps complaining, that casper.start() is not a valid method...

I got closest with node-webshot, but I did not manage to scroll down page.

This is my code so far:

var webshot = require('webshot');

var options = {
    shotSize: {
        height: 'all',
        streamType: 'jpg'
    }
};

webshot('www.xx.com', 'xx.com.jpg', options, function(err) {
    // screen shot saved to 'xx.com.jpg'
});

BTW I'm developing on a mac. The finished Node app will be on a linux server.

Any comments or experiences are appreciated!

Upvotes: 4

Views: 3219

Answers (3)

Nicolas Scordamaglia
Nicolas Scordamaglia

Reputation: 401

this code work for me with node in OSX, save it like test.js and run node test.js in CLI

var webshot = require('webshot');

var options = {
  streamType: 'png',
  windowSize: {
  width: 1024,
  height: 768
},
  shotSize: {
    width: 'all',
    height: 'all'
  }
};

webshot("blablabla.com","bla-image.png",options,(err) => {
  if(err){
    return console.log(err);
  }
  console.log('image succesfully');
});

Upvotes: 1

Andrius
Andrius

Reputation: 5939

Can't really help with installing CasperJS since on Windows it works by simply using npm install casperjs -g.

I've put up a simple script to do screenshots:

var casper = require('casper').create();
casper.options.viewportSize = {width: 1600, height: 950};
var wait_duration = 5000;
var url = 'http://stackoverflow.com/questions/33803790/capture-screen-shot-of-lazy-loaded-page-with-node-js';
console.log("Starting");
casper.start(url, function() {
    this.echo("Page loaded");
});

casper.then(function() {
    this.scrollToBottom();
    casper.wait(wait_duration, function() {
        casper.capture('screen.jpg');
        this.echo("Screen captured");
    });
});

casper.then(function() {
    this.echo("Exiting");
    this.exit();
});

casper.run();

The code is fairly straightforward:

  • Load the url
  • Scroll to the bottom
  • Wait for a specific duration (wait_duration) for stuff to load
  • Do a screenshot
  • End

Hopefully, that works for you!

Upvotes: 1

vmkcom
vmkcom

Reputation: 1668

you can automate it via Selenium, http://webdriver.io/. Yes, it's most like a testing engine, not a screen shot application, but you can fully control the browser automation and see the browser on your display while debugging

  • Start selenium server, with, for example, Google Chrome
  • Load your page
  • Do scrolling, clicking, everything with webdriver.io
  • Take a picture when you think it's a good time
  • close session

fast way to install selenium with nodejs -> https://github.com/vvo/selenium-standalone

Upvotes: -1

Related Questions