Linux伺服器安裝PhantomJS使用方法

PhantomJS（http://phantomjs.org/）是一個伺服器端的 JavaScript API 的 WebKit。其支援各種Web標準： DOM 處理, CSS 選取器, JSON, Canvas, 和 SVG等，可方便的應用於各種自動化的測試、螢幕捕獲、網路監控等環境。
Windows版的PhantomJS安裝比較簡單，下面就說一個Linux版本的PhantomJS的安裝及簡單用法。
Linux版本安裝有兩種方法，一是下載對應系統的編譯好的可執行檔使用，但可能會出現不能用的情況，這時就需要使用第二種，源碼編譯安裝。

一、直接下載編譯好的檔案

直接到Bitbucket下載對應的壓縮包（連結：https://bitbucket.org/ariya/phantomjs/downloads），例如我的是CentOS6.5 64位系統，下載的是phantomjs-1.9.8-linux-x86_64.tar.bz2，下載完成後解壓，在 bin 目錄內有編譯好的 phantomjs 檔案，直接用FTP等工具上傳到伺服器。
使用SSH登入伺服器，給phantomjs加上執行許可權chmod +x phantomjs，運行./phantomjs -h看能否顯示協助文檔，報錯的話可能就需要使用源碼編譯來安裝了。

二、源碼編譯

首先去官網下載最新穩定版本的源碼（連結：http://phantomjs.org/download.html），找到Linux下的Source Code下載，目前最新版本是2.0 直接下載
以下操作以CentOS為例，其它發行版大同小異
cd /usr/local/src
# 下載源碼
wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.0.0-source.zip
# 解壓源碼，沒有unzip命令的請使用yum install unzip 安裝
unzip phantomjs-2.0.0-source.zip
# 安裝編譯環境
yum -y install gcc gcc-c++ make flex bison gperf ruby \
  openssl-devel freetype-devel fontconfig-devel libicu-devel sqlite-devel \
  libpng-devel libjpeg-devel
# 開始編譯
cd phantomjs-2.0.0
./build.sh
編譯操作耗時會比較長（可以大於半個小時），耐心等待完成。編譯完成後會多出一個 bin 目錄，裡面有編譯完成的 phantomjs 檔案。
簡單使用
如果是下載的源碼，裡面會有個example檔案夾，我們使用其中的rasterize.js建立一個網站截圖。沒有這個檔案的可以複製下載的代碼並儲存為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"');
    console.log('  image (png/jpg output) examples: "1920px" entire page, window width 1920px');
    console.log('                                   "800px*600px" window, clipped to 800x600');
    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' };
    } else if (system.args.length > 3 && system.args[3].substr(-2) === "px") {
        size = system.args[3].split('*');
        if (size.length === 2) {
            pageWidth = parseInt(size[0], 10);
            pageHeight = parseInt(size[1], 10);
            page.viewportSize = { width: pageWidth, height: pageHeight };
            page.clipRect = { top: 0, left: 0, width: pageWidth, height: pageHeight };
        } else {
            console.log("size:", system.args[3]);
            pageWidth = parseInt(system.args[3], 10);
            pageHeight = parseInt(pageWidth * 3/4, 10); // it's as good an assumption as any
            console.log ("pageHeight:",pageHeight);
            page.viewportSize = { width: pageWidth, height: pageHeight };
        }
    }
    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(1);
        } else {
            window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 200);
        }
    });
}
使用以下命令建立網站截圖（注意其中的檔案路徑，請自行修改為你的phantomjs和rasterize.js的路徑
1
./phantomjs ../example/rasterize.js http://blog.icewingcc.com ./icewingcc.png
PhantomJS還可以用於網路監控、自動化等功能，而且JS檔案的內容還可以根據需要自行修改。具體的使用方法請參考官方網站的介紹，以及example檔案夾內樣本的說明。