9

我正在使用 PhantomJS 截取网页截图。

我看过其他关于@font-face 问题的帖子，但我页面上的字体呈现正确。我遇到的唯一问题是，每次我截取屏幕截图时，字体显示的内容都与之前的屏幕截图略有不同。因此，尽管它们渲染正确，但它们在屏幕截图上的外观却不一致。

我已经尝试了许多修复，大多数基于这样的假设，即它与在页面准备好之前截取的屏幕截图有关，但这似乎不是问题。例如，我延迟了截屏，以便字体有时间加载和渲染，但这并不能解决问题。

我曾尝试绑定到各种页面事件，但同样没有运气。

我附上了屏幕截图以显示差异。问题是，我需要渲染的屏幕截图在我使用它的上下文中是准确的。

截图 1 截图 2

作为说明，我也尝试过 CasperJS（知道它基于 PhantomJS，所以不希望它有任何不同）。

4

2 回答 2

0

您是否厌倦了观看DOM 中的字体相关事件？您也可以尝试每隔 X 秒截取一次屏幕截图，生成瞬间概览（请注意，这会产生大量空白和重复的图像。如果这是一个问题，请尝试简单地设置最小文件大小或检查是否有两个文件大小相同）。

var page = require('webpage').create();

page.open("http://www.slashdot.org", function (status) {
    phantom.exit();
}); 

var i = 0;
setInterval(function() {

    i += 1;
    page.render("/tmp/screenshots/screenshot-" + i + ".png");

}, 50);
于 2013-03-19T03:16:34.517 回答
0

您可以使用以下方法延迟屏幕截图：

var page = new WebPage();
page.open('http://stackoverflow.com/', function (status) {
        just_wait();
});

function just_wait() {
    setTimeout(function() {
            page.render('screenshot.png');
            phantom.exit();
    }, 2000);
}

在这里，您的屏幕截图是在页面加载后 2000 毫秒拍摄的。相应地设置延迟以允许页面完全加载所有资源。

于 2013-07-02T14:08:28.537 回答