Skip to content

Instantly share code, notes, and snippets.

@zhchbin

zhchbin/index.html

Created February 10, 2013 10:55
Show Gist options
  • Save zhchbin/4749217 to your computer and use it in GitHub Desktop.
Save zhchbin/4749217 to your computer and use it in GitHub Desktop.
Download ZIP
Node-Webkit API Demo: Window.capturePage
Raw
index.html
<html>
<body style="background: #333">
<script >
var gui = require('nw.gui');
var win = gui.Window.get();
function takeSnapshot() {
win.capturePage(function(img) {
var popWindow = gui.Window.open('popup.html',
{width: 420, height: 300});
popWindow.on('loaded', function() {
var image = popWindow.window.document.getElementById('image');
image.src = img;
});
}, 'png');
}
</script>
<div style="background: #123; width:100px; height:100px; border:1px solid
#000">
</div>
<button onclick="takeSnapshot()">Click me</button>
</body>
</html>
Raw
package.json
{
"name": "nw-api-demo",
"main": "index.html"
}
Raw
popup.html
<html>
<head>
<title>Popup window</title>
<style>
img{
width: 400;
}
</style>
</head>
<body>
<img id="image"/>
</body>
</html>
@JumpLink
Copy link

You can also save the image to file:

index.capturePage(function(img) {
  var base64Data = img.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
  require("fs").writeFile("out.png", base64Data, 'base64', function(err) {
    console.log(err);
  });
}, 'png');

@fengdi
Copy link

fengdi commented Feb 12, 2015 

function captureUrl(url, selector, callback){
  function offset(elem){
    var left=0;var top=0;
    do{
      left += elem.offsetLeft;
      top  += elem.offsetTop;
    }while(elem = elem.offsetParent)
    return {left:left,top:top}
  }
  var gui = require('nw.gui');
  var $ = require('jquery');
  var win = gui.Window.open(url, {
    position: 'center',
    //toolbar: true,
    show:false,
    width: 99999,
    height: 99999,
    frame:true
  });
  var isRun = false;

  win.on("loaded", function(){
    var window = win.window;
    var document = window.document;
    var elem = $(selector, document)[0];//document.querySelectorAll(selector)[0];
    var html = $("html", document);
    html.css({
      width: 999999,
      height: 999999,
      overflow: "auto"
    });
    if(elem){
      setTimeout(function(){
        var o = offset(elem);
        var left = o.left;
        var top = o.top;
        var width = elem.offsetWidth;
        var height = elem.offsetHeight;
        window.scrollTo(left, top);
        setTimeout(function(){
            if(win){
              win.capturePage(function(datauri){
                var canvas = document.createElement('canvas');
                canvas.setAttribute('width',width);
                canvas.setAttribute('height',height);
                var ctx = canvas.getContext('2d');
                var img = new window.Image();
                img.addEventListener("load", function() {
                  ctx.drawImage(img, left-window.scrollX,top-window.scrollY,width,height,0,0,width,height);
                  if(!isRun){
                    callback(null, canvas.toDataURL());
                    isRun = true;
                  }
                  win.close(true);
                  win = null;
                }, false);
                img.src = datauri;
              }, { format : 'png', datatype : 'datauri'});
            }
        },100);

      },100);
    }
  });
  win.on('closed', function() {
    win = null;
  });
  gui.Window.get().on('close', function() {
    this.hide();
    if (win != null) win.close(true);
    this.close(true);
  });
}


//demo
captureUrl("https://www.google.com", "img#hplogo", function(err, datauri){
  $("<img>").attr("src", datauri).appendTo("body");
});

@GitOnTop
Copy link

Just wanted to comment that in order to get a lossless image (best quality) you must specify 'png' at the end of the function. ie...

}, 'png');

If you don't specify anything here, then you'll get a compressed jpg image. EVEN IF you write the image to your hard drive as a png file, if you don't specify 'png' at the end of the function it will save it with compressed jpg quality.

I pulled my hair out for hours trying to figure out why my screenshot images didn't look quite as good as the source, and this was why. So hopefully I can spare someone else that pain :)

@wonderdogone
Copy link

could you feed in a string of .html from memory to capturePage?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment