Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Node-Webkit API Demo: Window.capturePage
<body style="background: #333">
<script >
var gui = require('nw.gui');
var win = gui.Window.get();
function takeSnapshot() {
win.capturePage(function(img) {
var popWindow ='popup.html',
{width: 420, height: 300});
popWindow.on('loaded', function() {
var image = popWindow.window.document.getElementById('image');
image.src = img;
}, 'png');
<div style="background: #123; width:100px; height:100px; border:1px solid
<button onclick="takeSnapshot()">Click me</button>
"name": "nw-api-demo",
"main": "index.html"
<title>Popup window</title>
width: 400;
<img id="image"/>

This comment has been minimized.

Copy link

JumpLink commented Aug 16, 2013

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) {
}, 'png');

This comment has been minimized.

Copy link

fengdi commented Feb 12, 2015

function captureUrl(url, selector, callback){
  function offset(elem){
    var left=0;var top=0;
      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 =, {
    position: 'center',
    //toolbar: true,
    width: 99999,
    height: 99999,
  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);
      width: 999999,
      height: 999999,
      overflow: "auto"
        var o = offset(elem);
        var left = o.left;
        var top =;
        var width = elem.offsetWidth;
        var height = elem.offsetHeight;
        window.scrollTo(left, top);
                var canvas = document.createElement('canvas');
                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);
                    callback(null, canvas.toDataURL());
                    isRun = true;
                  win = null;
                }, false);
                img.src = datauri;
              }, { format : 'png', datatype : 'datauri'});

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

captureUrl("", "img#hplogo", function(err, datauri){
  $("<img>").attr("src", datauri).appendTo("body");

This comment has been minimized.

Copy link

GitOnTop commented Aug 16, 2015

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 :)


This comment has been minimized.

Copy link

wonderdogone commented Oct 17, 2015

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
You can’t perform that action at this time.