Skip to content

@n1k0 /gist:1501173 forked from fbuchinger/gist:1501115
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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

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

@justindisney

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
Something went wrong with that request. Please try again.