12

このPhantomJSスクリプトからの出力は240x320ピクセルであるべきではありませんか？大きなデフォルトサイズの画像を取得しています。clipRect（）は正しいサイズの画像をレンダリングするように見えますが、実際のブラウザウィンドウサイズを反映するためにページのレスポンシブコンテンツが必要です。

var page = require('webpage').create();

page.viewportSize = { width: 240, height: 320 };  

page.open('http://cnn.com', function (status) {

    if (status !== 'success') {
        console.log('Unable to load the address!');
    } else {
        window.setTimeout(function () {
            page.render('default.png');
            phantom.exit();
        }, 200);
    }

});
4

4 に答える 4

11

これは機能します!! 問題の github ページでスニペットを見つけました。「body」要素をページ viewportSize に強制します。

var width = 1024;
var height = 768;
var webpage = require('webpage');

page = webpage.create();
page.viewportSize = {width: width, height: height};
page.open('http://harness.io', function(status) {
    console.log(status);
    page.evaluate(function(w, h) {
      document.body.style.width = w + "px";
      document.body.style.height = h + "px";
    }, width, height);
    page.clipRect = {top: 0, left: 0, width: width, height: height};                                                                                                                           
    page.render('/tmp/test.png');
    phantom.exit();
});
于 2014-10-01T14:45:01.447 に答える
5

これは既知の問題ですが、回避策を見つけました。

  1. 好きなサイズの iframe にページを読み込みます。
  2. iframe の四角形にクリップされたスクリーンショットをレンダリングします。

このリポジトリにそれを行うコードがあります: https://github.com/jbeuckm/Splasher

于 2013-05-25T04:24:53.003 に答える
-1

これは 1.9.7 の Mac バイナリで動作するようです:

page.set('viewportSize', {width: 320, height: 480});
于 2014-08-17T21:55:56.213 に答える