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.