在 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 代码呈现 png 文件的多个 URL。

    // 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 写入当然不存在的目录。

只需删除这样的字符：

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

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

Use the page title as the screenshot file name in PhantomJS

javascript

phantomjs