簡介
PhantomJS(
http://phantomjs.org/)是一個讓使用者可以使用javascript 控制WebKit排版引擎(主要設計是用來讓網頁瀏覽器繪製網頁)的API套件。筆者使用過後讚嘆不已，只能說：簡單！強大！好用！
安裝方式
其實不需要安裝啦！去官網下載後，直接解壓縮放到某一個目錄即可，若是windows會在解壓縮目錄下找到phantomjs.exe，直接在command line執行寫好的PhantomJS javascript即可(如hello.js)。
phantom hello.js
撰寫網頁截圖script
其實PhantomJS已經有附一個簡易的網頁截圖sample code，放在PhantomJS目錄下的examples/rasterize.js(命名比較奇怪，所以容易找不到):
var page
= require('webpage').create(),
system =
require('system'),
address,
output, size;
if
(system.args.length < 3 || system.args.length > 5) {
console.log('Usage: rasterize.js URL filename
[paperwidth*paperheight|paperformat] [zoom]');
console.log(' paper (pdf
output) examples: "5in*7.5in", "10cm*20cm", "A4",
"Letter"');
phantom.exit(1);
} else {
address =
system.args[1];
output =
system.args[2];
page.viewportSize = { width: 600, height: 600 };
if
(system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {
size =
system.args[3].split('*');
page.paperSize = size.length === 2 ? { width: size[0], height: size[1],
margin: '0px' }
: {
format: system.args[3], orientation: 'portrait',
margin: '1cm' };
}
if
(system.args.length > 4) {
page.zoomFactor = system.args[4];
}
page.open(address, function (status) {
if
(status !== 'success') {
console.log('Unable to load
the address!');
phantom.exit();
} else {
window.setTimeout(function () {
page.render(output);
phantom.exit();
},
200);
}
});
}
rasterize.js支援4個參數，依序介紹如下：
- (必填)要被截圖的網址，如：http://www.google.com.tw
- (必填)截圖完成時儲存的檔案名稱，如：c:\pageCapture.png
- (選填)若截圖為pdf時(用截圖檔案結尾為"pdf"做判斷)，pdf的紙張大小
- (選填)若截圖為pdf時(用截圖檔案結尾為"pdf"做判斷)，pdf的zoom size
執行結果
但這個範例的最大問題在於截圖的大小固定為600*600 px，所以在實用上需要再做一點修改，以下為將rasterize.js改為可以接收以px為單位的截圖大小：
var page
= require('webpage').create(),
system =
require('system'),
address,
output, size;
if
(system.args.length < 3 || system.args.length > 5) {
console.log('Usage: screenshot.js URL filename
[imagewidth*imageheight|paperwidth*paperheight|paperformat] [zoom]');
console.log(' image (png
output) examples: "1024*768"');
console.log(' paper (pdf
output) examples: "5in*7.5in", "10cm*20cm", "A4",
"Letter"');
phantom.exit(1);
} else {
address =
system.args[1];
output =
system.args[2];
var clipRect
= null;
page.viewportSize = { width: 600, height: 600 };
if
(system.args.length > 3) {
size =
system.args[3].split('*');
console.log('size[0] = ' + size[0] + ', size[1] = ' + size[1]);
if
(system.args[2].substr(-4) === ".pdf") {
page.paperSize = size.length === 2 ? { width: size[0], height: size[1],
margin: '0px' }
: { format: system.args[3], orientation: 'portrait',
margin: '1cm' };
} else {
clipRect = {top: 0, left:0, width: size[0], height: size[1]};
}
}
if
(system.args.length > 4) {
page.zoomFactor = system.args[4];
}
page.open(address, function (status) {
if
(status !== 'success') {
console.log('Unable to load
the address!');
phantom.exit();
} else {
window.setTimeout(function () {
try {
if (clipRect) {
page.clipRect = clipRect;
console.log('Capturing page
to ' + output + ' with clipRect' + JSON.stringify(clipRect));
} else {
console.log('Capturing page
to ' + output);
}
page.render(output);
} catch (e) {
console.log('Failed to
capture screenshot as ' +
output + ': ' + e, "error");
}
console.log('Capture screenshot success!');
phantom.exit();
},
200);
}
});
}
使用Java呼叫PhantomJS
在java程式內，可以使用Runtime物件的exec()方法產生image。
String execCommand = "C:/phantomjs-1.9.7/phantomjs.exe
C:/phantomjs-1.9.7/myJs/screenshot.js http://www.google.com.tw
c:/pageCapture.png 1024*768";
Process process = Runtime.getRuntime().exec(execCommand);
process.waitFor();
