Add ability to capture specific DOM elements

Fixes #100.

cli.js

@@ -43,6 +43,7 @@ function showHelp() {
  pageres todomvc.com yeoman.io 1366x768 1600x900
  pageres [ yeoman.io 1366x768 1600x900 --no-crop ] [ todomvc.com 1024x768 480x320 ] --crop
  pageres todomvc.com 1024x768 --name '<%= date %> - <%= url %>'
+ pageres yeoman.io 1366x768 --selector '.page-header'
  pageres --delay 3 1366x768 < urls.txt
  pageres unicorn.html 1366x768
  cat screen-resolutions.txt | pageres todomvc.com yeoman.io
@@ -52,6 +53,7 @@ function showHelp() {
  -c, --crop Crop to the set height
  --cookie <cookie> Browser cookie, can be set multiple times
  --name <template> Custom filename
+ --selector <element> Capture DOM element
 
  <url> can also be a local file path.
 

converter.js

@@ -51,6 +51,12 @@ page.open(options.url, function (status) {
  phantom.exit(1);
  }
 
+ if (options.selector) {
+ page.clipRect = page.evaluate(function (s) {
+ return document.querySelector(s).getBoundingClientRect();
+ }, options.selector);
+ }
+
  page.evaluate(function () {
  document.body.style.background = 'white';
  });

readme.md

@@ -41,6 +41,7 @@ Example
  pageres todomvc.com yeoman.io 1366x768 1600x900
  pageres [ yeoman.io 1366x768 1600x900 --no-crop ] [ todomvc.com 1024x768 480x320 ] --crop
  pageres todomvc.com 1024x768 --name '<%= date %> - <%= url %>'
+ pageres yeoman.io 1366x768 --selector '.page-header'
  pageres --delay 3 1366x768 < urls.txt
  pageres unicorn.html 1366x768
  cat screen-resolutions.txt | pageres todomvc.com yeoman.io
@@ -50,6 +51,7 @@ Options
  -c, --crop Crop to the set height
  --cookie <cookie> Browser cookie, can be set multiple times
  --name <template> Custom filename
+ --selector <element> Capture DOM element
 
 <url> can also be a local file path.
 
@@ -148,6 +150,12 @@ Available variables:
 - `crop`: Outputs `-cropped` when the crop option is true
 - `date`: The current date
 
+##### selector
+
+Type: `string`
+
+Capture a specific DOM element.
+
 
 ### pageres.src(url, sizes, options)
 

test/test.js

@@ -90,6 +90,25 @@ test('rename image using the `name` option', function (t) {
  });
 });
 
+test('capture a DOM element using the `selector` option', function (t) {
+ t.plan(5);
+
+ var pageres = new Pageres({ selector: '.page-header' })
+ .src('http://yeoman.io', ['1024x768']);
+
+ pageres.run(function (err, streams) {
+ t.assert(!err, err);
+ t.assert(streams[0].filename === 'yeoman.io-1024x768.png');
+
+ streams[0].pipe(concat(function (data) {
+ var size = imageSize(data);
+ t.assert(size.width === 1024);
+ t.assert(size.height === 80);
+ t.assert(data.length === 15016);
+ }));
+ });
+});
+
 test('support local relative files', function (t) {
  t.plan(3);