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.
