Skip to content

Instantly share code, notes, and snippets.

@n1k0
Forked from fbuchinger/gist:1501115
Created December 20, 2011 10:44
Show Gist options
  • Save n1k0/1501173 to your computer and use it in GitHub Desktop.
Save n1k0/1501173 to your computer and use it in GitHub Desktop.
PhantomJS: Capturing single dom elements as png files
var page = new WebPage(),
address, output, size;
//capture and captureSelector functions adapted from CasperJS - https://github.com/n1k0/casperjs
capture = function(targetFile, clipRect) {
var previousClipRect;
var clipRect = {top: 0, left:0, width: 40, height: 40};
if (clipRect) {
if (!isType(clipRect, "object")) {
throw new Error("clipRect must be an Object instance.");
}
// previousClipRect = page.clipRect;
//page.clipRect = clipRect;
console.log('Capturing page to ' + targetFile + ' with clipRect' + JSON.stringify(clipRect), "debug");
} else {
console.log('Capturing page to ' + targetFile, "debug");
}
try {
page.render(targetFile);
} catch (e) {
console.log('Failed to capture screenshot as ' + targetFile + ': ' + e, "error");
}
if (previousClipRect) {
page.clipRect = previousClipRect;
}
return this;
}
captureSelector = function(targetFile, selector) {
var selector = selector;
return capture(targetFile, page.evaluate(function(selector) {
try {
var clipRect = document.querySelector(selector).getBoundingClientRect();
return {
top: clipRect.top,
left: clipRect.left,
width: clipRect.width,
height: clipRect.height
};
} catch (e) {
console.log("Unable to fetch bounds for element " + selector, "warning");
}
}, { selector: selector }));
}
if (phantom.args.length != 1) {
console.log('Usage: makebuttons.js buttons.html');
phantom.exit();
} else {
address = phantom.args[0];
page.viewportSize = { width: 200, height: 200 };
page.paperSize = { width: 1024, height: 768, border: '0px' }
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
} else
{
//dump out each icon in buttons.html as individual png file
var iconRules = ['.ui-icon-alert','.ui-icon-arrow-1-n','.ui-icon-arrow-1-se'];
for (var i = 0; i < iconRules.length; i++){
var iconSel = iconRules[i];
captureSelector(iconSel.slice(1)+'.png',iconSel);
}
phantom.exit();
}
});
}
@nalbion
Copy link

nalbion commented May 17, 2014

I'm trying to figure out how to do something like this as part of an automated acceptance test suite from a grunt task.

@lklimek
Copy link

lklimek commented Jun 4, 2014

@justindisney
Copy link

phantom.args has been removed from phantomjs 2.0 (http://phantomjs.org/api/phantom/property/args.html).

Add var system = require('system'); at the top of the file, then use system.args instead.

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