2

PhantomJS を使用して、自分の Web ページからスクリーンショットを取得しています。コードは単純です

var page = require('webpage').create();
page.open('Target_Zone_Selection.html', function () {
    page.viewportSize = {width: 1024, height: 800};
    page.render('test.png');
    phantom.exit();
});

すべて正常に動作しますが、次にやりたいことは、スクリーンショットを実際の Web ページ (正確なビューポート サイズのブラウザーで表示される) に対応させることです。私の最終的な目標は、マウスの位置を取得し、スクリーンショットでこの位置に対応させることです。

そして問題があります: Web ページのサイズが PhantomJS からのレンダリングとは異なります。DOM を通過し、各オフセット位置を取得してスクリーンショットの寸法を見つけるなど、いくつかの解決策を試しましたが、常に問題があります。この方法は幅には機能しますが、高さには機能しません。

ウェブページとスクリーンショットを一致させる方法を誰か説明してもらえませんか? どうもありがとう ！

更新: 問題が発見されました: 私の Web ページには、キャンバス、ボタン、テキスト フォーム、およびいくつかの html が含まれています。一度 PhantomJS でレンダリングすると同じサイズにならない唯一の要素はボタンです...そして、ボタンのレンダリングはブラウザ間でも異なります...

ボタンのレンダリングされたサイズを予測するための提案はありますか?

4

1 に答える 1

0

モバイル デバイス用のビューポート タグについて話しているのですか? PhantomJS などの「デスクトップ」ブラウザはビューポートをサポートしていません。モバイル ブラウザーをサポートするツールまたはサービスを確認する必要があります ( https://browshot.com/など) 。

于 2013-04-18T21:14:16.463 に答える