Skip to content

Instantly share code, notes, and snippets.

@Aeon

Aeon/gist:bccf67fee339c590c8e7

Forked from n1k0/gist:1501173
Last active August 29, 2015 14:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Aeon/bccf67fee339c590c8e7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Aeon/bccf67fee339c590c8e7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Aeon revised this gist Aug 20, 2014. 1 changed file with 61 additions and 48 deletions.
    109 changes: 61 additions & 48 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,67 +1,80 @@
    var page = new WebPage(),
    address, output, size;

    address, selector, filename;

    var system = require('system');
    page.onConsoleMessage = function(msg) {
    system.stderr.writeLine('console: ' + msg);
    };

    //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.");
    capture = function(targetFile, clips) {
    clips.forEach(function(clip, i) {
    if (typeof clip != "object") {
    // console.log(JSON.stringify(clip));
    throw new Error("clip 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;
    }
    var targetFilename = targetFile + '-' + i + '.png';
    // console.log('Capturing page to ' + targetFile + ' with clipRect' + JSON.stringify(clip), "debug");
    page.clipRect = clip;
    try {
    page.render(targetFilename);
    } catch (e) {
    console.log('Failed to capture screenshot as ' + targetFilename + ': ' + e, "error");
    }
    });
    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
    };
    // var selector = selector;
    var clips = page.evaluate(function(args) {
    try {
    var tables = document.querySelectorAll(args.selector);
    return [].map.call(tables, function(el) {
    var clipRect = el.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 }));
    }, { selector: selector });
    console.log(JSON.stringify(clips));
    return capture(targetFile, clips);
    }

    if (phantom.args.length != 1) {
    console.log('Usage: makebuttons.js buttons.html');
    if (phantom.args.length < 2 || phantom.args.length > 5) {
    console.log('Usage: render_selector.js URL SELECTOR FILENAME_PREFIX');
    phantom.exit();
    } else {
    address = phantom.args[0];
    page.viewportSize = { width: 200, height: 200 };
    page.paperSize = { width: 1024, height: 768, border: '0px' }
    selector = phantom.args[1];
    filename = phantom.args[2];

    page.onError = function (msg, trace) {
    console.log("error on chart address: " + address);
    console.log(msg);
    trace.forEach(function(item) {
    console.log(' ', item.file, ':', item.line);
    });
    }

    // add a little extra space for scroll bars and such
    page.viewportSize = { width: 1140, height: 1140 };
    // page.paperSize = { width: 1140, height: 1140, 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();
    }
    } else {
    window.setTimeout(function () {
    captureSelector(filename, selector);
    phantom.exit();
    }, 200);
    }
    });
    }
    }
  2. @fbuchinger fbuchinger revised this gist Dec 20, 2011. 1 changed file with 5 additions and 6 deletions.
    11 changes: 5 additions & 6 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -24,12 +24,11 @@ capture = function(targetFile, clipRect) {
    page.clipRect = previousClipRect;
    }
    return this;
    },
    }

    captureSelector = function(targetFile, selector) {
    var selector = selector;
    return capture(targetFile, page.evaluate(function(selector) {

    return capture(targetFile, page.evaluate(function(selector) {
    try {
    var clipRect = document.querySelector(selector).getBoundingClientRect();
    return {
    @@ -42,10 +41,10 @@ captureSelector = function(targetFile, selector) {
    console.log("Unable to fetch bounds for element " + selector, "warning");
    }
    }, { selector: selector }));
    },
    }

    if (phantom.args.length != 1) {
    console.log('Usage: makebuttons.js URL');
    console.log('Usage: makebuttons.js buttons.html');
    phantom.exit();
    } else {
    address = phantom.args[0];
    @@ -56,8 +55,8 @@ if (phantom.args.length != 1) {
    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'];
    var iconRules = ['.testelement'];
    for (var i = 0; i < iconRules.length; i++){
    var iconSel = iconRules[i];
    captureSelector(iconSel.slice(1)+'.png',iconSel);
  3. @fbuchinger fbuchinger revised this gist Dec 20, 2011. 1 changed file with 1 addition and 7 deletions.
    8 changes: 1 addition & 7 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,7 @@
    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};
    @@ -25,13 +26,6 @@ capture = function(targetFile, clipRect) {
    return this;
    },

    /**
    * Captures the page area containing the provided selector.
    *
    * @param String targetFile Target destination file path.
    * @param String selector CSS3 selector
    * @return Casper
    */
    captureSelector = function(targetFile, selector) {
    var selector = selector;
    return capture(targetFile, page.evaluate(function(selector) {
  4. @fbuchinger fbuchinger created this gist Dec 20, 2011.
    74 changes: 74 additions & 0 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,74 @@
    var page = new WebPage(),
    address, output, size;

    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;
    },

    /**
    * Captures the page area containing the provided selector.
    *
    * @param String targetFile Target destination file path.
    * @param String selector CSS3 selector
    * @return Casper
    */
    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 URL');
    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
    {
    var iconRules = ['.ui-icon-alert','.ui-icon-arrow-1-n','.ui-icon-arrow-1-se'];
    var iconRules = ['.testelement'];
    for (var i = 0; i < iconRules.length; i++){
    var iconSel = iconRules[i];
    captureSelector(iconSel.slice(1)+'.png',iconSel);
    }
    phantom.exit();
    }
    });
    }