最近因为一个活儿所以要完成抓取网页截图这个需求,我研究了几个工具,就向大家分享一下我们的方案了。假如有什么错误和更好的提议,欢迎拍砖。
因为支付宝已经做过类似的功能,所以我就咨询了@天材他们的方案,感谢他提供了宝贵的资料作参考。
第一个方案:(直接用命令截图,再用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 [email protected]
这个版本比较稳定,最好不要下最新版本,我之前弄了好久都安装不成功,就上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
花名:无惟