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();
}
});
}