PhantomJS - Captura de pantalla
PhantomJS es muy útil para tomar una captura de pantalla de una página web y convertir una página web en un PDF. Hemos dado aquí un ejemplo sencillo para demostrar cómo funciona.
Ejemplo
var page = require('webpage').create();
page.open('http://phantom.org/',function(status){
page.render('phantom.png');
phantom.exit();
});
Ejecute el programa anterior y la salida se guardará como phantom.png.
Convierta páginas web en archivos PDF
PhantomJS también ayuda a convertir páginas web en archivos PDF con encabezados y pies de página agregados. Eche un vistazo al siguiente ejemplo para comprender cómo funciona.
var wpage = require('webpage').create();
var url = "https://en.wikipedia.org/wiki/Main_Page";
var output = "test.pdf";
wpage.paperSize = {
width: screen.width+'px',
height: '1500px',
margin: {
'top':'50px',
'left':'50px',
'rigtht':'50px'
},
orientation:'portrait',
header: {
height: "1cm",
contents: phantom.callback(function(pageNumber, nPages) {
return "<h5>Header <b>" + pageNumber + " / " + nPages + "</b></h5>";
})
},
footer: {
height: "1cm",
contents: phantom.callback(function(pageNumber, nPages) {
return "<h5>Footer <b>" + pageNumber + " / " + nPages + "</b></h5>";
})
}
}
wpage.open(url, function (status) {
if (status !== 'success') {
console.log('Page is not opening');
phantom.exit();
} else {
wpage.render(output);
phantom.exit();
}
});
El programa anterior genera lo siguiente output.
The above will convert the page into pdf and will be saved in test.pdf
Convertir un lienzo en una imagen
Phantomjs puede convertir fácilmente un lienzo en una imagen. Eche un vistazo al siguiente ejemplo para comprender cómo funciona.
var page = require('webpage').create();
page.content = '<html><body><canvas id="surface" width="400" height="400"></canvas></body></html>';
page.evaluate(function() {
var context,e1;
el = document.getElementById('surface');
context = el.getContext('2d');
context.font = "30px Comic Sans MS";
context.fillStyle = "red";
context.textAlign = "center";
context.fillText("Welcome to PhantomJS ", 200, 200);
document.body.style.backgroundColor = 'white';
document.body.style.margin = '0px';
});
page.render('canvas.png');
phantom.exit();
El programa anterior genera lo siguiente output.