Como renderizar parte de uma página com o PhantomJS?

Gostaria de renderizar elementos HTML individuais em PNGs usando o Phantom.JS. Alguém sabe se isso é possível? Além disso, como eu usaria o Phantom.js para renderizar uma página que o usuário já está procurando?

Para renderizar apenas parte de uma página, você precisa definir o atributo clipRect para a página e depois processá-la.

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

Eu não entendo a segunda parte da sua pergunta. O Phantom.js é sem header, o que significa que não há exibição real que o usuário esteja visualizando.

Exemplo de trabalho

 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(); }); 

Você pode usar o CasperJS, outro projeto baseado no PhantomJS.

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

A solução abaixo funciona para mim.

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

Mas percebo que isso só funciona se estamos renderizando uma imagem e não um pdf. Para wokaround isso para pdf, tente isso

 page.evaluate(function (element){ $(element).appendTo('body'); $('body > :not(' + element + ')').hide(); }, element); }); window.setTimeout(function(){ page.render("page.pdf"); },1000); 

Esses links podem ajudar: Como ocultar todos os elementos, exceto um usando jquery?

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

Eu tive a mesma necessidade, eu tentei isso e funcionou bem para mim:

não esqueça o http://www na URL

 var page = require('webpage').create(); page.open('YourPageURL', function (status) { if (status !== 'success') { console.log('Network Problem'); } else { var p = page.evaluate(function () { return document.getElementById('yourDivID').innerHTML }); console.log(p); } phantom.exit(); });