9

https://github.com/ariya/phantomjs/wiki/Screen-Captureで詳しく説明されているように、page.render（）メソッドを使用して、PhantomJSを使用してWebページのスクリーンショットを撮っています。

背景画像を除いて正常に動作します。すべて空白で表示されることがあります。http://screener.brachium-system.net/にアクセスしてURLとしてhttp://www.bing.com/と入力すると、問題の例を見ることができます。背景画像が必要な場所に大きな空きスペースがあります。なれ。

背景画像を強制的に表示する方法はありますか？

4

2 に答える 2

23

Phantomの例のデフォルトのrasterize.jsを使用してうまくいきました：

問題が解決しない場合は、ページの読み込みとレンダリングの間の遅延を増やしてみてください。遅延は 200 ミリ秒に設定されています (サンプル コードの 29 行目)。

page.open(address, function (status) {
    /* irrelevant */
   window.setTimeout(function () {
            page.render(output);
            phantom.exit();
        }, 200);
}

これが役立つ理由をよりよく理解するには: Phantom はページをリクエストし、完全に読み込まれるとすぐに画像にレンダリングします (すべてのアセットが配置され、スクリプトが実行されます)。しかし、背景画像は JavaScript を介して読み込まれるため、ブラウザには画像リクエストが増えることを事前に知る方法がありません。ページの読み込みとスクリーンショットの取得の間の遅延を長く設定すると、スクリプトから要求された可能性のある画像をダウンロードして表示する時間が得られます。

于 2013-01-17T13:43:00.580 に答える
0

私は同様の問題に遭遇し、webpage.onLoadFinished()を使用すると私の場合に機能することがわかりました:

// create a page instance
var page = require('webpage').create();
page.viewportSize = {
    width: 800,
    height: 600
};

// create some HTML code with an image in the background
style = 'background:url(file:///var/www/test.svg) no-repeat;';
style += 'background-size: contain;';
style += 'width: 100%; height: 100%;';
page.content = '<html><body style="' + style + '"></body></html>';

// onLoadFinished() will be called when the page finishes the loading
var outImage = '/var/www/test.png';
page.onLoadFinished = function() {
        page.render(outImage);
        phantom.exit();
};
于 2016-03-23T09:03:41.277 に答える