分享抓取網頁截圖的一些心得

最近由於一個活兒因此要完成抓取網頁截圖這個需求，我研究了幾個工具，就向你們分享一下咱們的方案了。假若有什麼錯誤和更好的提議，歡迎拍磚。

 由於支付寶已經作過相似的功能，因此我就諮詢了@天材他們的方案，感謝他提供了寶貴的資料做參考。

第一個方案：（直接用命令截圖，再用ImageMagic裁剪）
僞代碼以下：
​（1）截圖指令[ " + "xvfb-run.sh --auto-servernum CutyCapt --delay=" + delay+ " --max-wait=" + maxWait + " --url=" + url + " --out=" + filePath + "]
（2）截取指定圖片指定大小指令[" + "convertcrop " + cutWidth + "x" + cutHight + "+" + cutStartX + "+" + cutStartY + " " + filePath + " " + filePath + "]

但我以爲第一個方案彷佛有點彆扭，並且截圖的命令也不知道能不能支持多個平臺（由於公司只配置了一臺筆記本給我，win系統的），因此我就去探討另一個方案。

第二個方案：（PhantomJs + NodeJs + ImageMagick）
方案分析：

理由​：
PhantomJs是支持各個平臺的，並且用起來很方便。細心的同窗能夠看到它安裝的腳本，是會根據不一樣平臺下載不一樣的版本。

if (process.platform === 'linux' && process.arch === 'x64') {
  downloadUrl += 'linux-x86_64.tar.bz2'
} else if (process.platform === 'linux') {
  downloadUrl += 'linux-i686.tar.bz2'
} else if (process.platform === 'darwin') {
  downloadUrl += 'macosx.zip'
} else if (process.platform === 'win32') {
  downloadUrl += 'windows.zip'
} else {
  console.log('Unexpected platform or architecture:', process.platform, process.arch)
  exit(1)
}

​步驟和注意點：
​[ 1 ] 安裝phantomjs

npm install phantomjs@1.9.2-1

這個版本比較穩定，最好不要下最新版本，我以前弄了很久都安裝不成功，就上github看裏面的Issue，做者也建議安裝1.9.2-1（特別在win下）
​[ 2 ] 安裝ImageMagic和gm模塊
​根據做者描述GraphicsMagick and ImageMagick for node，因此使用gm的時候注意設置是ImageMagick的模式。

var gm = require('gm').subClass({ imageMagick: true });

​使用方法：(裏面的連接都有詳細解釋，我就不展開了)
​{1}phantomjs模塊的使用方法: https://www.npmjs.org/package/phantomjs
​{2}phantomjs的API: http://phantomjs.org/
​{3}gm模塊的使用方法: https://www.npmjs.org/package/gm

性能測試：
​本機：
CPU：i5-3230M 2.60GHz
內存：​8G
​截圖淘寶首頁花費時間：20.0+秒 （山窮水盡疑無路）

​服務器：
​CPU：16 Intel(R) Xeon(R) CPU L5630 @ 2.13GHz
​內存：49552672K（約等於47.25G）
​​截圖淘寶首頁花費時間：1.0+秒 （柳暗花明又一村）

​

​第三個方案：（使用webkit2png工具）
​今天剛恰好跟一位騰訊的小夥伴聊天，剛恰好聊起這事兒，他也剛恰好作了跟我類似的東西，但他使用的是webkit2png，因此就互相交流一下了。他是使用webkit2png的，webkit2png是一個命令行工具，其實跟phantomjs也很相似，我查了下也是支持各個平臺的。
@TQ博客: http://targetkiller.net/preview-mac-in-win/
具體請移步到文檔：http://www.paulhammond.org/webkit2png/

---

微博：@任重致遠-MR梁廣彬
英文名：jambinliang
花名：無唯

2014/2/23