PhantomJS Seite Rendern Schriftarten

Question

Ich verwende PhantomJS, um Screenshots von Webseiten zu erstellen.

Ich habe andere Beiträge zu Problemen mit @ font-face gesehen, aber die Schriftarten auf meinen Seiten werden korrekt gerendert. Das einzige Problem, das ich habe, ist, dass jedes Mal, wenn ich einen Screenshot mache, die Schriftarten etwas anders aussehen als beim vorherigen Screenshot. Obwohl sie korrekt gerendert werden, sind sie in ihrem Aussehen auf dem Screenshot inkonsistent.

Ich habe eine Reihe von Korrekturen versucht, die meisten basieren auf der Annahme, dass es etwas damit zu tun hat, dass der Screenshot gemacht wird, bevor die Seite fertig ist, aber das scheint nicht das Problem zu sein. Zum Beispiel habe ich den Screenshot verzögert, so dass die Schriftart geladen und gerendert werden kann, aber das löst das Problem nicht.

Ich habe versucht, an verschiedene Seiten Ereignisse zu binden, aber wieder kein Glück.

Ich habe Screenshots angehängt, um den Unterschied zu zeigen. Das Problem ist, ich brauche den gerenderten Screenshot im Kontext dessen, wofür ich ihn verwende.

Als Hinweis, habe ich CasperJS auch versucht (zu wissen, dass es so nicht auf PhantomJS basiert es anders zu erwarten).

Answer 1

Haben Sie es leid, die DOM for font related Ereignisse zu beobachten? Sie können auch versuchen, alle x Sekunden einen Screenshot zu machen, um eine Moment-Moment-Übersicht zu erstellen (beachten Sie, dass dadurch viele leere und doppelte Bilder entstehen. Wenn dies ein Problem ist, geben Sie einfach eine Min-Dateigröße ein oder prüfen Sie, ob zwei Dateien vorhanden sind haben die gleiche Größe).

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

Sie können den Screenshot mit dem folgenden Verfahren verzögern:

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

hier Ihr Screenshot genommen 2000ms nach Ihrer Seite geladen wird. Legen Sie die Verzögerung entsprechend fest, damit die Seite alle Ressourcen vollständig laden kann.