用 PhantomJS 實現網頁抓圖機器人

有時候我們需要一些網頁自動化的工作，像是資料爬蟲、搶票、自動化測試等等。那如何在沒有圖形桌面環境的 Linux 下完成這些工作呢？這時候可以藉助 PhantomJS 這個工具，PhantomJS 底層透過 QtWebkit 進行網頁的渲染，你可以想像它執行的時後開了一個沒有畫面的瀏覽器，然後我們可以透過 JavaScript 直接操作 DOM，就像在 Chrome Developer Tools 的 Console 介面一樣。使用傳統 HTTP Layer 像是 CURL 之類的工具抓取網頁，碰到透過 JavaScript 渲染的網頁就很頭痛，使用 PhantomJS 便可以執行 JS 並完整渲染網頁，對於現在常常使用 JavaScript SPA (Single-page Application) 建立的網頁或應用，就可以完整地進行 Dom 操作與資料擷取。超方便 der...

安裝 PhantomJS

以 Ubuntu Server 為範例安裝 PhantomJS 的方法如下：

sudo apt-get install phantomjs xvfb xfonts-wqy

測試 PhantomJS 擷取網頁畫面

接下來我們設計一個簡單的 Exmaple 抓取網頁畫面 (GitHub capture.js)，JS 內容如下：

"use strict";

var page = require('webpage').create();

page.open('https://blog.toright.com', function() {
    // show title
    var title = page.evaluate(function() {
        return document.title;
    });
    console.log(title);

    // screen capture
    page.render('screenshot.png');
    phantom.exit();
});

上面這一段程式碼會開啟「https://blog.toright.com」然後取得 HTML Title 後輸出，接著將畫面擷取並儲存為 screenshot.png 檔案。由於我們測試的 Server 並沒有圖形介面，因此需要透過 xvfb 來執行 PhantomJS，執行命令如下：

xvfb-run phantomjs capture.js

執行後可以看到畫面輸出網頁的標題，也可以整合 jasmine 之類的測試工具進行測試，如下：

在執行目錄中也會產生網頁的抓圖 screenshot.png 檔案（圖片很長因此下半部省略），如下：

上圖擷取畫面可以看出來變成手機版的，原因是 xvfb 啟動的畫面預設只有 400px，我們可以透過以下命令指定我們希望的顯示大小，比如 1024x768 如下：

xvfb-run --server-args="-screen 0 1024x768x24" phantomjs capture.js

接下來要做什麼事就自己發揮創意吧，要搶票、測試、爬資料都可以囉，掰了！

用 PhantomJS 實現網頁抓圖機器人

安裝 PhantomJS

測試 PhantomJS 擷取網頁畫面

Post navigation