web-dev-qa-db-fra.com

Comment rendre une partie d'une page avec PhantomJS?

Je souhaite convertir des éléments HTML individuels en fichiers PNG à l'aide de Phantom.JS. Est-ce que quelqu'un sait si c'est possible? De plus, comment utiliser Phantom.js pour rendre une page déjà regardée par l'utilisateur?

javascriptphantomjs
22
Dany Joumaa

Pour ne rendre qu'une partie d'une page, vous devez définir l'attribut clipRect pour la page, puis le restituer.

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

Je ne comprends pas la deuxième partie de votre question. Phantom.js est sans tête, ce qui signifie qu’il n’ya aucun affichage réel regardé par un utilisateur.

50
jasonlfunk

Exemple de travail.

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

Vous pouvez utiliser CasperJS, un autre projet basé sur PhantomJS.

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

casper.run();
5
Silvio Lucena Junior

La solution ci-dessous fonctionne pour moi.

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

Mais je remarque que cela ne fonctionne que si nous rendons une image et non un pdf. 

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

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

Ces liens peuvent aider: Comment cacher tous les éléments sauf un en utilisant jquery?

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

0
onlyme