javascript - Phantomjs 呈现错误的快照大小

Question

我们尝试使用 phantomjs(可调整大小的页面和固定页面)从不同的网页制作快照。 当我们尝试在维基百科上这样做时(页面可调整大小)，客户端的视口(viewport)尺寸将被忽略。 问题出在渲染中，因为我们定义了视口(viewport)宽度和高度。 似乎 Phantomjs 首先稍微拉伸(stretch)页面(快照的文本比原始维基百科大一点)，然后裁剪右边距，并在底部添加大边距。

代码如下:

var oWebpage = Webpage.create();

oWebpage.viewportSize = {
    width  : nViewportWidth,
    height : nViewportHeight
};

oWebpage.onLoadFinished = function() {
    if (oWebpage.injectJs('inject.js')) {
        // nothing is being done to affect page size in inject.js
        try {
            oWebpage.evaluate(function() {
                // nothing is being done to affect page size here either
            });
            oWebpage.render(sImagePath, {format: 'png', quality: '100'});
            phantom.exit();
        } catch (oError) {
            phantom.exit(1);
        }
    } else {
        phantom.exit(1);
    }
};

oWebpage.open(sMyUrl, function(sStatus) {
    if (sStatus != 'success') {
        phantom.exit(1);
    }
});

我们试图在 evaluate() 代码中获取文档大小和窗口大小，它们都等于来自客户端的视口(viewport)大小。

我们尝试使用 page.zoomFactor，但没用。 Cliprect 也没有帮助，它只是剪切页面，但它已经在快照上调整了大小。

在我们尝试过的所有其他页面上，它运行完美，只有在维基百科上，这种行为才如此奇怪。只是奇怪。 有没有人遇到过这样的问题？

Answer 1

发现维基百科页面上的问题出在它的 CSS 中。 它包含具有“vw”值的属性，Phantom 错误地处理了这些属性。它不是像素值，而是视口(viewport)的百分比。 唯一的解决方法是解析 css 并删除“vw”属性。

虽然 Phantom 完成后突然停止工作。切换到 NightmareJs - 至少它是稳定的。