3

Webkit 上に構築された PhantomJS を使用して、Web ページの大きな png スクリーンショットを生成しようとしています。私はスクリーンショットをうまく生成するアプリケーションを持っています ( raster.js の例を使用します)。次のようなことを行うだけで、Webページを単純にスケーリング/ズームできると思いました。

document.documentElement.style.webkitTransform = "scale(2.0)";

しかし、それにより、ページのコンテンツがビューポートをエスケープします。これは、Chrome でそのコード行を評価するとわかります。JavaScript/Phantom.js で Web ページ全体をスケーリングする (ブラウザの「Ctrl +」機能を複製する) ことは可能ですか?

私の現在のphantom.jsスクリプトは次のようになります:

var page = new WebPage(),
    address, output, size;

if (phantom.args.length < 2 || phantom.args.length > 3) {
    console.log('Usage: rasterize.js URL filename');
    phantom.exit();
} else {
    address = phantom.args[0];
    output = phantom.args[1];
    page.viewportSize = { width: 1280, height: 1024 };
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {
            page.evaluate(function () {
                document.body.style.webkitTransform = "scale(2.0)";
            });
            window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 200);
        }
    });
}
4

2 に答える 2

2

試す

page.zoomFactor=2.0;

CSS プロパティは、webkitTransform原点の設定の有無にかかわらず、希望どおりに動作しません。1 つには、要素の寸法は変更されません (つまり、再レイアウトは発生せず、要素は現在のバウンディング ボックス内でズームされます)。

于 2012-10-03T03:31:14.333 に答える
0

アップデート

CSS プロパティを設定するのを忘れたtransform-originため、コンテンツが半分上下に拡大され (デフォルトは50% 50%)、上部がエスケープされます。

したがって0% 0%、変換を下と右にのみ発生させるには、 に設定します。

document.body.style.webkitTransformOrigin = "0% 0%";

50%また、ビューポートの 2 倍の大きさになるのを避けるために、ボディの幅を に設定する必要があります。

document.body.style.width = "50%";

古い答え - 無視

これは垂直方向の配置のみを解決します

スケーリングは上下しますが、ビューポートは下にしか伸びません。幸いなことに、修正は簡単です。コンテンツの高さを半分に下げます。

これを倍増関数として使用すれば、問題ありません。

page.evaluate(function() {
    var h = $('body').height();
    $('body').css('position', 'relative');
    $('body').css('top', h/2 + 'px');
    $('body').css('-webkit-transform', 'scale(2.0)');
});

とにかく、この変換を扱うときは奇妙な動作をすることgetBoundingClientRect()に注意してください。page.clipRect

于 2012-05-11T22:00:57.293 に答える