javascript - 在PhantomJS中使用页面标题作为截图文件名

Question

以下PhantomJS代码可用于获取页面标题<title>网页的内容

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

以下 PhantomJS 代码将多个 URL 渲染到 png 文件。

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

渲染文件的名称格式为 "rendermulti-"+ urlIndex + ".png"。但我希望它是页面标题+“.png”。如何根据我的要求修改上面的代码。

Answer 1

由于 page 是全局的，因此您可以通过以下方式轻松更改 getFilename():

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

您也不需要访问页面上下文(在 page.evaluate() 内部)来获取标题。您只需访问 page.title :

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

标题可能包含无法出现在目录或文件中的字符。例如，如果它包含 a/b，这将尝试将文件 b.png 写入目录 a，当然该目录不存在。

只需删除这些字符:

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