Extract Frames from website as PNG images with PhantomJS

README.md

1. run npm install phantomjs-prebuilt inside the directory where these files are located (launch.js and webpageRecord.js).
2. run node launch.js
3. See frames folder for images.

launch.js

var fs = require('fs')
var path = require('path')
var childProcess = require('child_process')
var phantomjs = require('phantomjs-prebuilt')
var binPath = phantomjs.path

var childArgs = [path.join(__dirname, 'webpageRecord.js')]

var process = childProcess.spawn(binPath, childArgs)
var frame = 0
process.stdout.on('data',function(data){
    console.log(data.toString())
})
// process.stderr.on('data',function(){
//     console.log(data.toString())
// })

webpageRecord.js

var page = require("webpage").create();
page.viewportSize = { width: 1920, height: 1080 };

page.open("https://www.accuweather.com/en/ca/vancouver/v6c/weather-forecast/53286", function() {
  setTimeout(function() {
    // Initial frame
    var frame = 0;
    // Add an interval every 25th second
    setInterval(function() {
      // Render an image with the frame name
      page.render("frames/weather" + frame++ + ".png", { format: "png" })
      // Exit after 50 images
      if (frame > 100) {
        phantom.exit();
      }
  }, 1000);
  }, 666);
});