Question

我们尝试使用phantomjs（可调整页面和固定页面）从不同的网页制作快照。当我们尝试在维基百科上执行此操作（页面可调整大小）时，将忽略来自客户端的视口尺寸。问题在于渲染，因为我们定义了视口宽度和高度。似乎Phantomjs首先略微拉伸页面（快照的文本比原始的维基百科略大），然后它会缩小右边距，并在底部添加大的边距。

以下是代码：

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（）代码中获取文档大小和窗口大小，它们都等于来自客户端的视口大小。

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

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

Answer 1

发现维基百科页面上的问题在于其css。它包含了＆＃39; vw＆＃39;由Phantom错误处理的值。它不是像素值，而是来自Viewport的百分比。唯一的解决方法是解析CSS并摆脱＆＃39; vw＆＃39;属性。

虽然毕竟完成幻影突然停止工作。切换到NightmareJs - 至少它是稳定的。

Phantomjs呈现错误的快照大小

1 个答案: