Use the page title as the screenshot file name in PhantomJS

Question

The following PhantomJS code can be used to obtain page title <title> of a web page

var page = require('webpage').create();
page.open(url, function(status) {
    var title = page.evaluate(function() {
        return document.title;
    });
    console.log('Page title is ' + title);
    phantom.exit();
});

The following PhantomJS code renders multiple URLs to png files.

    // Render Multiple URLs to file

    var RenderUrlsToFile, arrayOfUrls, system;

    system = require("system");

    /*
    Render given urls
    @param array of URLs to render
    @param callbackPerUrl Function called after finishing each URL, including the last URL
    @param callbackFinal Function called after finishing everything
    */
    RenderUrlsToFile = function(urls, callbackPerUrl, callbackFinal) {
    var getFilename, next, page, retrieve, urlIndex, webpage;
    urlIndex = 0;
    webpage = require("webpage");
    page = null;
    getFilename = function() {
        return "rendermulti-" + urlIndex + ".png";
    };
    next = function(status, url, file) {
        page.close();
        callbackPerUrl(status, url, file);
        return retrieve();
    };
    retrieve = function() {
        var url;
        if (urls.length > 0) {
            url = urls.shift();
            urlIndex++;
            page = webpage.create();
            page.viewportSize = {
                width: 800,
                height: 600
            };
            page.settings.userAgent = "Phantom.js bot";
            return page.open("http://" + url, function(status) {
                var file;
                file = getFilename();
                if (status === "success") {
                    return window.setTimeout((function() {
                        page.render(file);
                        return next(status, url, file);
                    }), 200);
                } else {
                    return next(status, url, file);
                }
            });
        } else {
            return callbackFinal();
        }
    };
    return retrieve();
    };

    arrayOfUrls = null;

    if (system.args.length > 1) {
        arrayOfUrls = Array.prototype.slice.call(system.args, 1);
    } else {
        console.log("Usage: phantomjs render_multi_url.js [domain.name1, domain.name2, ...]");
        arrayOfUrls = ["www.google.com", "www.bbc.co.uk", "www.phantomjs.org"];
    }

    RenderUrlsToFile(arrayOfUrls, (function(status, url, file) {
        if (status !== "success") {
            return console.log("Unable to render '" + url + "'");
        } else {
            return console.log("Rendered '" + url + "' at '" + file + "'");
        }
    }), function() {
        return phantom.exit();
    });

The names of rendered files are in the format of "rendermulti-" + urlIndex + ".png" . But I want it to be page title+".png". How can I modify above code for my requirement.

Answer 1

Since page is global, you can easily change getFilename() in this way:

getFilename = function() {
    var title = page.evaluate(function() {
        return document.title;
    });
    return title + ".png";
};

You also don't need to access the page context (inside of page.evaluate()) to get the title. You can simply access page.title:

getFilename = function() {
    return page.title + ".png";
};

It may be the case that the title contains characters that cannot appear in a directory or file. If it contains for example a/b, this will try write file b.png to directory a which of course doesn't exist.

Simply remove such characters:

return title.replace(/[\\\/:]/g, "_") + ".png";