這涉及好幾個程式,先記下一些背景資料。
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 官方說明就好。