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渲染頁字體

回答

相關問題