fbpx

用 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

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