9

PhantomJS を使用して Web ページのスクリーンショットを撮っています。

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

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

さまざまなページイベントにバインドしようとしましたが、やはりうまくいきません。

違いを示すスクリーンショットを添付しました。問題は、レンダリングされたスクリーンショットが、使用目的のコンテキストで正確である必要があることです。

スクリーンショット 1 スクリーンショット 2

注として、CasperJS も試しました (PhantomJS に基づいていることを知っているので、違いはないと思います)。

4

2 に答える 2

0

フォント関連のイベントのDOM を見るのにうんざりしていませんか? また、X 秒ごとにスクリーンショットを撮って、その瞬間の概要を作成することもできます (これにより、多くの空の画像と重複した画像が生成されることに注意してください。それが問題である場合は、最小ファイル サイズを設定するか、2 つのファイルがあるかどうかを確認してください。サイズは同じです）。

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-19T03:16:34.517 に答える