分享抓取网页截图的一些心得

2019年8月28日 156次阅读 来源: 梁广彬 
 最近因为一个活儿所以要完成抓取网页截图这个需求，我研究了几个工具，就向大家分享一下我们的方案了。假如有什么错误和更好的提议，欢迎拍砖。

 因为支付宝已经做过类似的功能，所以我就咨询了@天材他们的方案，感谢他提供了宝贵的资料作参考。

第一个方案：（直接用命令截图，再用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

    原文作者：梁广彬
    原文地址: https://segmentfault.com/a/1190000000416750
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞