PhantomJSレンダリングページのフォント

Question

私はPhantomJSを使ってウェブページのスクリーンショットを撮っています。

@ font-faceの問題について他の投稿を見ましたが、ページのフォントが正しく表示されています。私が抱いている唯一の問題は、スクリーンショットを撮るたびに、フォントが前のスクリーンショットと少し違って見えることです。したがって、正しくレンダリングされていても、スクリーンショットの外観に一貫性がありません。

私は多くの修正を試みました。これは、ほとんどの場合、ページが準備される前のスクリーンショットと関係があると仮定していますが、これは問題ではないようです。たとえば、フォントを読み込んでレンダリングする時間があるように、スクリーンショットを延期していますが、これで問題は解決されません。

私は様々なページイベントにバインドしようとしましたが、再び運がありません。

私はその違いを示すためにスクリーンショットを添付しました。問題は、レンダリングされたスクリーンショットが、私が使っているもののコンテキストで正確である必要があるということです。注意点として

、私は（それはそれが任意の異なるように期待していないPhantomJSに基づいていることを知る）ならびにCasperJSを試みました。

Answer 1

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

Answer 2

次の方法を使用してスクリーンショットを遅らせることができます：あなたのページがロードされた後、ここで

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ミリ秒を撮影したものです。 遅延を設定すると、ページがすべてのリソースを完全にロードできるようになります。