PhantomJS渲染页字体

我使用PhantomJS截取网页截图。PhantomJS渲染页字体

我已经看到关于@ font-face问题的其他帖子，但是我的页面上的字体渲染正确。我遇到的唯一问题是，每次我截图时，字体都显示与以前的截图略有不同。所以虽然它们渲染正确，但它们在屏幕截图上的外观不一致。

我已经尝试了一些修复程序，大部分基于假设它是在页面准备好之前拍摄的截图，但这似乎不是问题。例如，我延迟了正在进行的截图，以便字体有时间加载并渲染，但这不能解决问题。

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

我附上截图以显示不同之处。问题是，我需要渲染的屏幕截图在我使用它的背景下是准确的。

screenshot 1 screenshot 2

作为一个说明，我已经试过CasperJS以及（知道它是基于PhantomJS所以不希望它有什么不同）。

来源

2013-03-12 JonB

这是哪个平台/操作系统？ – 2013-03-13 14:28:40

那么PhantomJS应用程序在Ubuntu 11上运行。该网站运行在不同的服务器上。 – JonB 2013-03-13 14:54:45

您可能需要想出一个容易再现的测试用例。 – 2013-03-15 15:24:25

你累了看DOM for font related事件吗？你也可以尝试每隔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-19 03:16:34 Indolering

对不起，这是非常低效的..我相信幻像让你设置一个回调，何时加载DOM（这意味着所有适当的字体也下载了） – 2013-10-20 16:47:52

您可以使用下面的方法耽误您的截图：

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-02 14:08:28 charlybr

PhantomJS渲染页字体

回答

相关问题