1

我有一个 PhantomJS 脚本，它遍历我的文件系统中的文件夹并截取 HTML 页面的屏幕截图。

由于窗口大小和此处解释的各种问题，我选择将 HTML 文件放在我选择的宽度和高度的对象中，然后对其进行截图。

如果我使用具有相对数据 URL 的对象创建一个基本的 HTML 文件并在我的浏览器中打开它，它就可以完美运行。

这是我的文件结构的概述。

.
├── dist
|   ├── page_one
|       └── page_one.html
|   └── page_two
|       └── page_two.html
└── tools
    └── screenshot.js

下面的代码保存在我称为 screenshot.js 的文件中。我希望能够通过 PhantomJS 运行它。它本质上是读取逗号分隔的目录字符串（例如 page_one、page_two）、导航到这些页面、截取屏幕截图并移动到下一个。但尽管生成的 HTML 与我之前创建的测试文件相同，但屏幕截图始终是空白的。

如果我用绝对路径替换相对数据 URL，则脚本可以完美运行，但如果每个项目都必须更改文件路径，显然这不是很可重用。

我已经尝试../在相对数据 url 之前使用一些，但这仍然不起作用。

var args = require('system').args,
    resourceWait  = 300,
    maxRenderWait = 10000,
    filesbefore   = "page_one,page_twoK",
    files         = filesbefore.split(','),
    mode          = 'iframe',
    page          = require('webpage').create(),
    count         = 0,
    forcedRenderTimeout,
    renderTimeout;

page.viewportSize = { width: 1024, height : 768 };

function doRender() {
    page.render(filename);
    next();
}

page.onResourceRequested = function (req) {
    count += 1;
    clearTimeout(renderTimeout);
};

page.onResourceReceived = function (res) {
    if (!res.stage || res.stage === 'end') {
        count -= 1;
        if (count === 0) {
            clearTimeout(forcedRenderTimeout);
            renderTimeout = setTimeout(doRender, resourceWait);
        }
    }
};

page.onConsoleMessage = function (msg) {
    console.log("from page: " + msg);
};

function evaluateJsWithArgs(func) {
    var args = [].slice.call(arguments, 1);
    var fn = "function() { return (" + func.toString() + ").apply(this, " + JSON.stringify(args) + "); }";
    return page.evaluate(fn);
};

function next(error) {
    if(!error) {
        if (files.length == 0){
            phantom.exit();
        }else{
            takeScreenshot(files.pop());
        }
    }
}

function takeScreenshot(file){
    var url = 'dist/' + file + '/' + file + '.html';
    filename = file + '.png';
    page.open('about:blank', function (status) {
        if (status !== "success") {
            console.log('Unable to load url');
            phantom.exit();
        } else {
            page.includeJs(
                "https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js",
                function() {
                    evaluateJsWithArgs(
                        function(url, w, h) {
                            console.log(url);
                            $('body')
                                .css({margin: 0, padding: 0})
                                .html('<object style="background: red;" data="../' + url + '" width="'+ w + '" height="' + h + '" id="screen-frame" />');

                                console.log($('body').html());
                        },
                        url,
                        page.viewportSize.width,
                        page.viewportSize.height
                    );
                }
            );

            forcedRenderTimeout = setTimeout(function () {
                doRender();
            }, maxRenderWait);
        }
    });
}

takeScreenshot(files.pop());

请有人告诉我为什么这不起作用。

提前致谢。

-

注意：如果你想在本地运行它，然后像我上面一样创建一个基本的文件结构，下载 PhantomJS，cd 到项目的根目录并运行phantomjs tools/screenshot.js.

-

编辑 搜索后我发现了这个Q&A。所以据我了解，PhantomJS 在使用相对路径时无法打开本地文件。

拥有绝对路径不是一个合适的选择，因为它永远不会总是相同的。

目前我能找到的唯一其他选择是将文件放在本地服务器上，然后从服务器 URL 运行脚本。

4

0 回答 0