web-dev-qa-db-ja.com

PhantomJSでページの一部をレンダリングする方法は？

Phantom.JSを使用して個々のHTML要素をPNGにレンダリングしたいと思います。これが可能かどうか誰かが知っていますか？また、Phantom.jsを使用して、ユーザーがすでに見ているページをレンダリングするにはどうすればよいですか？

javascriptphantomjs
22
Dany Joumaa

ページの一部のみをレンダリングするには、ページのclipRect属性を設定してからレンダリングする必要があります。

var clipRect = document.querySelector(selector).getBoundingClientRect();
page.clipRect = {
    top:    clipRect.top,
    left:   clipRect.left,
    width:  clipRect.width,
    height: clipRect.height
};
page.render('capture.png');

私はあなたの質問の2番目の部分を理解していません。 Phantom.jsはヘッドレスです。つまり、ユーザーが見ている実際の表示はありません。

50
jasonlfunk

実例。

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

page.open('http://google.com', function() {
  // being the actual size of the headless browser
  page.viewportSize = { width: 1440, height: 900 };

  var clipRect = page.evaluate(function(){
    return document.querySelector('#hplogo').getBoundingClientRect();
  });

  page.clipRect = {
    top:    clipRect.top,
    left:   clipRect.left,
    width:  clipRect.width,
    height: clipRect.height
  };

  page.render('google.png');
  phantom.exit();
});
22
mgrachev

PhantomJSに基づく別のプロジェクトであるCasperJSを使用できます。

casper.start('http://www.weather.com/', function() {
    this.captureSelector('weather.png', '#wx-main');
});

casper.run();
5
Silvio Lucena Junior

以下の解決策は私のために働きます。

    var clipRect = document.querySelector(selector).getBoundingClientRect();
     page.clipRect = {
              top:    clipRect.top,
              left:   clipRect.left,
              width:  clipRect.width,
              height: clipRect.height
      };
   page.render('capture.png');

しかし、これが機能するのは、PDFではなく画像をレンダリングしている場合のみです。これをPDFで回避するには、これを試してください

page.evaluate(function (element){
    $(element).appendTo('body');
    $('body > :not(' + element + ')').hide(); 
   }, element);       
  });

window.setTimeout(function(){
    page.render("page.pdf");
  },1000);

このリンクは役立つかもしれません： jqueryを使用して1つを除くすべての要素を非表示にする方法は？

https://github.com/ariya/phantomjs/issues/10465

0
onlyme