PhantomJS渲染页面字体

Question

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

我见过有关@ font-face问题的其他帖子,但我网页上的字体正确呈现.我遇到的唯一问题是,每次拍摄屏幕截图时,字体显示与上一屏幕截图略有不同.因此,虽然它们正确呈现,但它们在屏幕截图上的外观不一致.

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

我已尝试绑定到各种页面事件,但再次,没有运气.

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

作为一个注释,我也尝试过CasperJS(知道它是基于PhantomJS所以不要期望它有任何不同).

Answer 1

您是否厌倦了观看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);