viewportSizeがPhantomJSで動作しないようです

Question

この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); 
    } 

}); 

Answer 1

これは既知の問題ですが、私は回避策が見つかりました：

1. はあなたが好きなサイズのIFRAMEにページをロードします。
2. iframeの矩形にクリップされたスクリーンショットをレンダリングします。

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

Answer 2

これは1.9.7のためのMacバイナリで動作しているようです：

page.set('viewportSize', {width: 320, height: 480}); 

Answer 3

これは動作します！ issue .ITのgithubのページでスニペットがページ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(); 
}); 

Answer 4

がCasperJSでは、私は、この問題に対処し、上記の方法（複数可）を使用し、最終的には、casper.viewport()メソッドを使用して単一のビューポートオプションを設定すると、（少なくとも私にとっては、CasperJSでは）不必要であることが判明しました。

私は以下のバージョンを掲載しました。そのため、一度に多くのURLでどのように動作するかを確認できます。

// Requires node.js and casperjs (npm install casperjs) 
var casper = require('casper').create(); 
var root_dir = 'screenshots/'; 
var links = []; 
var root  = 'http://localhost:8001/'; 
var DEBUG = false; 
var opts  = {top: 0, left: 0, 'width': 1280, 'height': 1024}; 

function getHrefs() { 
    // Taken wholesale from casperjs 
    // http://docs.casperjs.org/en/latest/quickstart.html 
    var links = document.querySelectorAll('.days li > a'); 
    return Array.prototype.map.call(links, function(e) { 
     return e.getAttribute('href'); 
    }); 
} 

function captureLinks(links) { 
    casper.echo('= SCREEN CAPTURING LINKS ===='); 
    casper.each(links, function(self, link) { 
     var filename = root_dir + link.replace('/index.html', '') + '.png'; 
     casper.echo('Capturing... ' + filename); 

     // Relevant code... 
     this.viewport(opts.width, opts.height); 


     self.thenOpen(root + link, function() { 
      // slight delay for external libraries and init loading 
      this.wait(500, function(){ 
       this.capture(filename, opts); 
      }); 
     }); 
    }); 
} 

casper.start(root, function() { 
    links = links.concat(this.evaluate(getHrefs)); 
    this.echo('= GETTING LINKS ===='); 
    if(DEBUG) this.echo(links.join('\n')); 
    captureLinks(links); 
}); 

casper.run();