Me gustaría representar elementos HTML individuales en PNG utilizando Phantom.JS. ¿Alguien sabe si esto es posible? Además, ¿cómo usaría Phantom.js para representar una página que el usuario ya está mirando?¿Cómo renderizar parte de una página con PhantomJS?
Para representar solo parte de una página, debe establecer el atributo clipRect para la página y luego procesarlo.
var clipRect = document.querySelector(selector).getBoundingClientRect();
page.clipRect = {
top: clipRect.top,
left: clipRect.left,
width: clipRect.width,
height: clipRect.height
};
page.render('capture.png');
No entiendo la segunda parte de su pregunta. Phantom.js no tiene cabeza, lo que significa que no hay una pantalla real que el usuario esté mirando.
que tenían la misma necesidad, he intentado esto y ha funcionado bien para mí:
no se olvide el http://www en la 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();
});
Votado porque en realidad no guarda capturas de pantalla de "elementos HTML individuales en PNG" como se indica en la pregunta. Simplemente imprime el HTML interno de algún elemento en la consola. –
Puede utilizar los CasperJS, otro proyecto basado en PhantomJS.
casper.start('http://www.weather.com/', function() {
this.captureSelector('weather.png', '#wx-main');
});
casper.run();
Ejemplo de trabajo.
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();
});
La siguiente solución funciona para mí.
var clipRect = document.querySelector(selector).getBoundingClientRect();
page.clipRect = {
top: clipRect.top,
left: clipRect.left,
width: clipRect.width,
height: clipRect.height
};
page.render('capture.png');
Pero veo que esto funciona solo si estamos visualizando una imagen, no un pdf. Para wokaround esto para pdf, probar este
page.evaluate(function (element){
$(element).appendTo('body');
$('body > :not(' + element + ')').hide();
}, element);
});
window.setTimeout(function(){
page.render("page.pdf");
},1000);
Estos links pueden ayudar: How to hide all elements except one using jquery?
entiendo que es phantom.js sin cabeza. Lo que necesito en particular es su capacidad de capturar una página web desde lo que está visible en la ventana del navegador. ¿Conoces una manera de hacer esto? –
De acuerdo, entiendo lo que quieres decir. No estoy seguro si PhantomJS funciona de esa manera o no. No sé si Phantom tiene algún concepto de una ventana gráfica o algo así. – jasonlfunk
Ya veo. Estoy buscando algún tipo de marco que hace esto o alguna función dentro de la API de extensión de Chrome que me permite hacer esto. Si tiene algún apuntador, lo agradecería enormemente. –