Node.JS + PhantomJS + pageres 全自動 Website Screenshot (可設定 CLI 及多解像度) 折騰筆記

這涉及好幾個程式,先記下一些背景資料。

Node.js 是近年新興的 Scripting engine,用的也是 Chromium 的 V8 JavaScript Engine。
以往通常用 Perl 或 Bash Script 實現的功能幾乎都全做到,甚至連 PHP 的位置都想搶了。

PhantomJS 是一個 Headless-browser,
其實就是用 Chromium Source Code 做,沒有介面只能用 CLI 控制的 Browser。
只用 PhantomJS 其實已經能做很多東西,例如 自動填 Form 訂 iPhone 及 Screenshot 等。

NPM (Node Package Manager) 是 Node.js 成功背後一大功臣,提供 Node.js 的 Module管理,當然也解決了大部分 Dependency 的問題。

終於到主角出場:今次受上司所托研究一個叫 pageres 的 module – https://github.com/sindresorhus/pageres
Github 的 Page 沒有寫清楚,這其實是 Node.js 的 module,而且 Depend on PhantomJS。
它可以一次過 Capture 不同 Resolution 的 Website Screenshot,看似相當方便。
可是安裝這堆東西又折騰了一個多小時。

設定環境:Ubuntu 12.04 及 CentOS 5.9

1. Node.JS 安裝

最初測試是用一台 Ubuntu 12.04 測試,apt-get install nodejs 成功安裝。
可是用 NPM 安裝 pageres 卻失敗,公司 Server 的 CentOS 5.9 更糟,yum 連 Package都沒有。

npm view pageres

得知原來 pageres 需要 Node.JS 0.10.0 或以上,而 Ubuntu 12.04 repository 提供的是 0.6.12。

engines: { node: '>=0.10.0' }

網上方法嘗試自己 Compile,卻因為 Python 版本太舊,未安裝 g++ 等各種原因失敗。

最後為了省時直接用官方的 Linux x64 binary 安裝罷了。

wget http://nodejs.org/dist/v0.10.26/node-v0.10.26-linux-x64.tar.gz
cd /usr/local && tar --strip-components 1 -xzf /root/nodejs/node-v0.10.26-linux-x64.tar.gz

驗證一下安裝,出現版本 v0.10.26,如果沒成功就是應該未設定 Set Environment path

node -v
v0.10.26

2. pageres 與 Phantom JS 安裝

此時 NPM 應該都正確安裝,使用 Github 上的方法安裝 pageres 為 Node.js global module。

npm install --global pageres

安裝成功,嘗試用 CLI 執行 pageres

pageres edr.hk 1920x1080

卻顯示 “You are not allowed to run this app with root permissions.”,
可能是考慮到安全性吧? su 成其他 user 之後又出現不知名錯誤。

/usr/local/lib/node_modules/pageres/cli.js:54
            throw new Error(chalk.red('✗ ' + err.message));

上網找了一下基本確定是 PhantomJS 問題: https://github.com/sindresorhus/pageres/issues/47

嘗試直接執行附帶的 phantomjs,果然找到錯誤來源:

/usr/local/lib/node_modules/pageres/node_modules/webshot/node_modules/phantomjs/lib/phantom/bin/phantomjs: 
error while loading shared libraries: libfontconfig.so.1: cannot open shared object file: No such file or directory

原來 pageres 需要的 PhantomJS 理應會以 Node.js module 形式自動安裝 ,可是仍然遇到麻煩。
最終原因是 CentOS 下 PhantomJS 需要 fontconfig (Ubuntu 那一台又不用… 原生都是沒安裝的)

yum install fontconfig

然後再執行 phantomjs 一次,成功獲得 prompt 了。

phantomjs>

3. 使用 pageres

此時 su 回去再執行 pageres,這次成功執行了。

pageres edr.hk 1920x1080

✓ Successfully generated 1 screenshots from 1 url and 1 resolution

當前目錄也生成了 edr.hk-1920×1080.png,成功了!

pageres 直接用 CLI 執行 或者用 node.js script 用 module 形式呼叫都可以了。
CLI 執行不附加 resolution parameter 會直接 Capture 預設的 10 種 resolution。
其他用法直接看 Github 官方說明就好。

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.