PhantomJS - Chụp màn hình

PhantomJS rất hữu ích trong việc chụp ảnh màn hình trang web và chuyển đổi trang web thành PDF. Chúng tôi đã đưa ra ở đây một ví dụ đơn giản để chứng minh cách nó hoạt động.

Thí dụ

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

Thực hiện chương trình trên và đầu ra sẽ được lưu dưới dạng phantom.png.

Chuyển đổi các trang web thành PDF

PhantomJS cũng giúp chuyển đổi các trang web thành PDF với đầu trang và chân trang được thêm vào đó. Hãy xem ví dụ sau để hiểu cách hoạt động của nó.

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

Chương trình trên tạo ra như sau output.

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

Chuyển đổi Canvas thành Hình ảnh

Phantomjs có thể dễ dàng chuyển đổi Canvas thành Hình ảnh. Hãy xem ví dụ sau để hiểu cách hoạt động của nó.

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

Chương trình trên tạo ra như sau output.