PhantomJS - การจับภาพหน้าจอ

PhantomJS มีประโยชน์มากในการจับภาพหน้าจอของหน้าเว็บและแปลงหน้าเว็บเป็น PDF เราได้ยกตัวอย่างง่ายๆเพื่อแสดงให้เห็นว่ามันทำงานอย่างไร

ตัวอย่าง

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

ดำเนินการโปรแกรมข้างต้นและผลลัพธ์จะถูกบันทึกเป็น phantom.png.

แปลงหน้าเว็บเป็น PDF

PhantomJS ยังช่วยในการแปลงหน้าเว็บเป็น PDF ด้วยส่วนหัวและส่วนท้ายที่เพิ่มเข้าไป ลองดูตัวอย่างต่อไปนี้เพื่อทำความเข้าใจวิธีการทำงาน

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

โปรแกรมข้างต้นสร้างสิ่งต่อไปนี้ output.

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

แปลงผ้าใบเป็นรูปภาพ

Phantomjs สามารถแปลง Canvas เป็นรูปภาพได้อย่างง่ายดาย ลองดูตัวอย่างต่อไปนี้เพื่อทำความเข้าใจวิธีการทำงาน

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

โปรแกรมข้างต้นสร้างสิ่งต่อไปนี้ output.