rdtsc · May 27, 2014 22:38
diff --git a/app.css b/app.css
 body {
  background-image: linear-gradient(to right, #00F, #0F0, #F00);
  font-family: sans-serif;
 }

 .controls {
  text-align: center;
 }

 .content {
  margin-top: 10px;
  padding: 20px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #FFF;
  text-shadow: 1px 1px 1px #000;
 }

 h1 {
  margin-top: 0;
  margin-bottom: 10px;
 }

 p {
  margin: 10px 0 0 0;
  text-align: justify;
 }

 p:nth-of-type(2) {
  color: #FFFF00;
 }
diff --git a/app.js b/app.js
 'use strict';

 var gui = require('nw.gui');
 var win = gui.Window.get();
 var fs  = require('fs');

 function capturePageDemo() {
  var filename = 'page-demo.png';
  var imageFmt = 'png';

  win.capturePage(function(data) {
    dumpBase64(data, filename, function(error) {
      if(error) throw error;

      gui.Shell.openItem(filename);
    });
  }, imageFmt);
 }

 function captureRegionDemo() {
  var target = document.querySelector('p + p');
  var bounds = target.getBoundingClientRect();

  var filename = 'region-demo.png';
  var imageFmt = 'png';

  captureRegion(bounds, function(data) {
    dumpBase64(data, filename, function(error) {
      if(error) throw error;

      gui.Shell.openItem(filename);
    });
  }, imageFmt);
 }

 function captureRegion(rect, callback, format) {
  win.capturePage(function(data) {
    var img = new Image();

    img.onload = function() {
      var canvas = document.createElement('canvas');

      canvas.width  = rect.width;
      canvas.height = rect.height;

      canvas.getContext('2d').drawImage(img, -rect.left, -rect.top);
      callback(canvas.toDataURL('image/' + format));
    };

    img.src = data;
  }, 'png'); // Ensure JPEG compression happens only once, if ever.
 }

 function dumpBase64(data, filename, callback) {
  data = data.substr(data.indexOf(',') + 1);

  fs.writeFile(filename, data, 'base64', callback);
 }
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>NW Page Capture Demo</title>
    <link rel="stylesheet" href="app.css">
    <script src="app.js"></script>
  </head>
  <body>

    <section class="controls">
      <button onclick="capturePageDemo()">Capture Page</button>
      <button onclick="captureRegionDemo()">Capture 2nd Paragraph</button>
    </section>

    <section class="content">
      <h1>Demo</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, nihil,
      est, soluta, iure consequuntur doloribus fugit deserunt sapiente
      perferendis ea ut voluptatum delectus qui asperiores libero esse illo
      ullam nam.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia,
      quod dolore soluta sit consequuntur officiis beatae nulla ex ipsam animi.
      Illo, adipisci possimus dolor fugit dignissimos enim necessitatibus
      aliquam reprehenderit.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt,
      temporibus atque enim. Quaerat, reprehenderit, quasi, deserunt, deleniti
      hic totam odit dolor harum recusandae magnam qui doloremque dicta rerum
      tenetur cum.</p>
    </section>

  </body>
 </html>
diff --git a/package.json b/package.json
 {
  "name": "nw-page-capture-demo",
  "main": "index.html",
  "window": {
    "width": 600,
    "height": 400
  }
 }
	body {
	background-image: linear-gradient(to right, #00F, #0F0, #F00);
	font-family: sans-serif;
	}

	.controls {
	text-align: center;
	}

	.content {
	margin-top: 10px;
	padding: 20px;
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.5);
	color: #FFF;
	text-shadow: 1px 1px 1px #000;
	}

	h1 {
	margin-top: 0;
	margin-bottom: 10px;
	}

	p {
	margin: 10px 0 0 0;
	text-align: justify;
	}

	p:nth-of-type(2) {
	color: #FFFF00;
	}
	'use strict';

	var gui = require('nw.gui');
	var win = gui.Window.get();
	var fs = require('fs');

	function capturePageDemo() {
	var filename = 'page-demo.png';
	var imageFmt = 'png';

	win.capturePage(function(data) {
	dumpBase64(data, filename, function(error) {
	if(error) throw error;

	gui.Shell.openItem(filename);
	});
	}, imageFmt);
	}

	function captureRegionDemo() {
	var target = document.querySelector('p + p');
	var bounds = target.getBoundingClientRect();

	var filename = 'region-demo.png';
	var imageFmt = 'png';

	captureRegion(bounds, function(data) {
	dumpBase64(data, filename, function(error) {
	if(error) throw error;

	gui.Shell.openItem(filename);
	});
	}, imageFmt);
	}

	function captureRegion(rect, callback, format) {
	win.capturePage(function(data) {
	var img = new Image();

	img.onload = function() {
	var canvas = document.createElement('canvas');

	canvas.width = rect.width;
	canvas.height = rect.height;

	canvas.getContext('2d').drawImage(img, -rect.left, -rect.top);
	callback(canvas.toDataURL('image/' + format));
	};

	img.src = data;
	}, 'png'); // Ensure JPEG compression happens only once, if ever.
	}

	function dumpBase64(data, filename, callback) {
	data = data.substr(data.indexOf(',') + 1);

	fs.writeFile(filename, data, 'base64', callback);
	}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>NW Page Capture Demo</title>
	<link rel="stylesheet" href="app.css">
	<script src="app.js"></script>
	</head>
	<body>

	<section class="controls">
	<button onclick="capturePageDemo()">Capture Page</button>
	<button onclick="captureRegionDemo()">Capture 2nd Paragraph</button>
	</section>

	<section class="content">
	<h1>Demo</h1>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, nihil,
	est, soluta, iure consequuntur doloribus fugit deserunt sapiente
	perferendis ea ut voluptatum delectus qui asperiores libero esse illo
	ullam nam.</p>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia,
	quod dolore soluta sit consequuntur officiis beatae nulla ex ipsam animi.
	Illo, adipisci possimus dolor fugit dignissimos enim necessitatibus
	aliquam reprehenderit.</p>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt,
	temporibus atque enim. Quaerat, reprehenderit, quasi, deserunt, deleniti
	hic totam odit dolor harum recusandae magnam qui doloremque dicta rerum
	tenetur cum.</p>
	</section>

	</body>
	</html>
	{
	"name": "nw-page-capture-demo",
	"main": "index.html",
	"window": {
	"width": 600,
	"height": 400
	}
	}