node-webkit screenshot

Make HiRes screenshots using node-webkit

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node.js <script>document.write(process.version)</script>.
    <p>

<input id="url" value="https://infovis.fh-potsdam.de/ddb/epochen/#skip">
      <button id="open">open</button>
      <button id="screen">screen</button>
    </p>
  </body>

var gui = require('nw.gui');

var win = null;

d3.select("#open").on("click", function(){
  var url = d3.select("#url").node().value;

win = gui.Window.get(
    window.open(url)
  );

setTimeout(function() {

win.zoomLevel = [0];
    win.resizeTo(500, 500);

},500);

})

d3.select("#screen").on("click", function(){
  takeScreenshot(win)
 })

function takeScreenshot(win) {

// unfortunately, we can't use the "resize" event here because it is fired before the DOM is refreshed, that's why I'm simply using a timeout
   setTimeout(function() {

var zoom = 4.0;

var width = win.window.document.documentElement.scrollWidth*zoom/2+100;
    var height = win.window.document.documentElement.scrollHeight*zoom/2;

//alert(height)

win.zoomLevel = [zoom];
    win.resizeTo(width, height);

setTimeout(function() {
     win.capturePage(function(img) {

var base64Data = img.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
       require("fs").writeFile(+new Date()+".png", base64Data, 'base64', function(err) {
         if(err) {
           alert(err);
         }
       });
     }, 'png');
    }, 1500);

}, 500);
 }

</script>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js