PhantomJS Render Page Fonts

Question

Sto utilizzando PhantomJS per acquisire schermate di pagine Web.

Ho visto altri post sui problemi con @ font-face, ma i caratteri sulle mie pagine sono visualizzati correttamente. L'unico problema che sto avendo è che ogni volta che prendo uno screenshot, i caratteri mostrano leggermente in modo diverso rispetto allo screenshot precedente. Quindi, anche se sono visualizzati correttamente, sono incoerenti nel loro aspetto sullo screenshot.

Ho provato un numero di correzioni, la maggior parte basata sul presupposto che si tratti di uno scatto da fare prima che la pagina sia pronta, ma questo non sembra essere il problema. Ad esempio, ho ritardato l'acquisizione dello screenshot in modo che il font abbia il tempo di caricare e di essere reso, ma questo non risolve il problema.

Ho provato a legare a vari eventi di pagina, ma ancora una volta, senza fortuna.

Ho allegato schermate per mostrare la differenza. Il problema è che ho bisogno che lo screenshot reso sia accurato nel contesto di ciò per cui lo sto usando.

Come nota, ho provato CasperJS così (sapendo che si basa su PhantomJS quindi non mi aspettavo di essere diverso).

Answer 1

Sei stanco di guardare gli eventi DOM for font related? Puoi anche provare a scattare uno screenshot ogni X secondi, producendo una panoramica del momento (nota che questo produrrà molte immagini vuote e duplicate. Se questo è un problema, prova semplicemente impostando una dimensione minima del file o controllando per vedere se due file avere la stessa dimensione).

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

È possibile ritardare il tuo screenshot utilizzando il seguente metodo:

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

Qui, lo screenshot è preso 2000 ms dopo la pagina viene caricata. Impostare il ritardo di conseguenza per consentire alla pagina di caricare completamente tutte le risorse.