PhantomJS Render Page Fonts

Question

Używam PhantomJS do robienia zrzutów ekranu ze stron internetowych.

Widziałem inne posty dotyczące problemów z @ font-face, ale czcionki na moich stronach renderują się poprawnie. Jedyny problem, jaki mam, polega na tym, że za każdym razem, gdy robię zrzut ekranu, czcionki pokazują trochę inaczej niż poprzednie zrzuty ekranu. Więc mimo, że renderują się poprawnie, są niespójne w swoim wyglądzie na zrzucie ekranu.

Próbowałem wielu poprawek, w większości opartych na założeniu, że ma to jakiś związek ze zrzutem ekranu, zanim strona jest gotowa, ale to nie wydaje się być problemem. Na przykład opóźniłem pobieranie zrzutu ekranu, aby czcionka miała czas na wczytanie i zostanie wyrenderowana, ale to nie rozwiązuje problemu.

Próbowałem wiązania do różnych zdarzeń strony, ale znowu, nie ma szczęścia.

Załączam zrzuty ekranu, aby pokazać różnicę. Problem polega na tym, że renderowany zrzut ekranu musi być dokładny w kontekście tego, do czego go używam.

Jako notatkę, próbowałem CasperJS jak również (wiedząc, że jest ona oparta na PhantomJS więc nie spodziewałem się, że każdy jest inny).

Answer 1

Czy jesteś już zmęczony oglądaniem wydarzeń DOM for font related? Możesz też spróbować zrobić zrzut ekranu co X sekund, tworząc przegląd momentu i momentu (pamiętaj, że spowoduje to powstanie wielu pustych i zduplikowanych obrazów. Jeśli to jest problem, spróbuj po prostu ustawić minimalny rozmiar pliku lub sprawdzić, czy są dwa pliki mieć ten sam rozmiar).

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); 

Answer 2

Można opóźnić zrzut ekranu przy użyciu następującej metody:

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); 
} 

Tutaj Twój zrzut ekranu zostanie podjęta po 2000ms strona jest ładowana. Ustaw odpowiednio opóźnienie, aby strona mogła całkowicie załadować wszystkie zasoby.