PhantomJS - Bildschirmaufnahme

PhantomJS ist sehr hilfreich, um einen Screenshot einer Webseite zu erstellen und eine Webseite in eine PDF-Datei zu konvertieren. Wir haben hier ein einfaches Beispiel gegeben, um zu demonstrieren, wie es funktioniert.

Beispiel

var page = require('webpage').create();
page.open('http://phantom.org/',function(status){
   page.render('phantom.png');
   phantom.exit();
});

Führen Sie das obige Programm aus und die Ausgabe wird als gespeichert phantom.png.

Konvertieren Sie Webseiten in PDFs

PhantomJS hilft auch beim Konvertieren von Webseiten in PDFs, wobei Kopf- und Fußzeilen hinzugefügt werden. Schauen Sie sich das folgende Beispiel an, um zu verstehen, wie es funktioniert.

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

Das obige Programm generiert Folgendes output.

The above will convert the page into pdf and will be saved in test.pdf

Konvertieren Sie eine Leinwand in ein Bild

Phantomjs können eine Leinwand leicht in ein Bild konvertieren. Schauen Sie sich das folgende Beispiel an, um zu verstehen, wie es funktioniert.

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

Das obige Programm generiert Folgendes output.