我花两天时间，做了一个极简的在线网页快照生成工具

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2497 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近偶然看到很强大的网页抓取工具 headless chrome。学习了一下，很快就写了个小网页放到网上。

很简单的功能，输入一个网址，生成手机和桌面版本的全屏截图。（支持某些不存在的站点）

放出地址, 请各位把玩把玩 http://www.91urls.com

我在想这个东西有没有往后做的可能，比如把大家生成截图的网址列出来，大家可以点赞、收藏、评论。问题是 url 可能包罗万象，没有集中的兴趣点。

各位有什么想法，一起探讨一下，顺便帮我带点流量过来。

第 1 条附言 · 2018-01-16 21:30:15 +08:00

刚刚服务器挂了，cpu 一直 100%。现暂时已恢复。除了服务器本身配置低之外，还有很多性能优化可做。比如增加用户排队，防止同一个用户重复提交等。我会慢慢优化，争取让这个服务逐渐稳定可用。

第 2 条附言 · 2018-01-17 12:13:36 +08:00

已经做了简单的优化，限制了并发任务数。
现在首要做的是提高抓取成功率，还是有很多失败的 case 是因为抓取 timeout。现在设的是 30 秒 timeout。
整个服务还有点不稳定，还得优化，服务器也会升个级。请大家暂时容忍一下偶尔的服务器瘫痪~

第 3 条附言 · 2018-01-17 21:04:17 +08:00

目前现在正在迁服务器，原来阿里云$4.5 一个月的内存太小，换了一台新的。等域名重新解析过去就好了，请稍稍等待

第 4 条附言 · 2018-01-18 04:14:11 +08:00

又搞了一晚上，终于搞了两个重大改进。

第一，修复了超长页面的截图问题。因为 chrome 有一个 hardcode 的最大高度，是 16000 多 px。所以将超长图切分为几个高度在 16000px 以内的图。

第二，解决了页面中由于 lazy loading 而没有加载全的问题。

大家试试，现在截出来的网页是不是比以前好多了，哈哈

这个站我会不断地改进的，马上会有新的东西上，大家继续支持支持

生成

把玩

网页

截图

50 条回复 • 2019-06-16 10:18:05 +08:00

onsale

2018-01-16 20:40:01 +08:00

生成的图片命名应该和源网页有关联
http://statics.91urls.com/production/pages/13/3764920d294d72f47dbe990949441623/desktop.png

onsale

2018-01-16 20:41:49 +08:00

http://statics.91urls.com/production/pages/20/cbfe12e591fdca6a9a3cc013e925dfd3/mobile.png

zhtphoenix

2018-01-16 20:44:39 +08:00

@onsale 下一步可以做抓取页面内容进行分析

7654

2018-01-16 20:46:12 +08:00

用这个可以上班摸鱼哈

Sanko

2018-01-16 20:46:26 +08:00 via Android

花式看 yellow pic

northisland

2018-01-16 20:46:37 +08:00

@我扶奶奶过哈登

zhtphoenix

2018-01-16 20:52:08 +08:00

兄弟们太火爆了，把我服务器搞挂了。。并发时性能还有问题

zhtphoenix

2018-01-16 20:54:08 +08:00

得先优化一下并发的性能了

AlwaysBee

2018-01-16 20:57:14 +08:00

不错啊，之前一直用着 Full page screen capture 这个插件

Pudge1337

2018-01-16 23:52:48 +08:00 via Android

不错，好玩！

miaomiao888

2018-01-17 04:30:58 +08:00

不错，有点意思，收藏了！
http://statics.91urls.com/production/pages/206/7dd64777074ce7902baa0702522bb5b9/desktop.png

NUT

2018-01-17 08:58:07 +08:00

ajax 这种没处理好。都是白的

mclxly

2018-01-17 08:58:12 +08:00

提个建议：我之前想做的，是每天发送一张截图给微信，例如 jd 的产品价格页。

shapl

2018-01-17 09:08:27 +08:00

怎么自己发了那么多请求？？？

kimown

2018-01-17 09:13:49 +08:00

LZ 是依据什么判断页面已经加载完毕，然后截图的，例如页面是纯数据填充的，但由于网速，后端接口需要 10s 后才返回，那 LZ 什么时候截图呢

nine99

2018-01-17 09:19:16 +08:00

好厉害！！非常好用！！就是如果需要登入的网站是不是就用不了？

zgx030030

2018-01-17 09:51:56 +08:00

@nine99 确实是，试了下某乎，截到的是登录框

whileFalse

2018-01-17 09:52:26 +08:00

看楼主的域名，果断生成了个 91p0rn 的截图。

timeisweapon

2018-01-17 09:54:58 +08:00

不错

keventseng

2018-01-17 10:34:58 +08:00

这是已经崩了吗？

shenyu1996

2018-01-17 11:07:49 +08:00

使用的 puppeteer 么？后台的服务器是 linux 么，昨天我也在搞这个抓了下 b 站我账号下的动态更新，windows 下运行没问题，但是想跑在服务器上有点麻烦

julu

2018-01-17 11:18:53 +08:00

体验了下，很实用

Sunrise837

2018-01-17 11:22:39 +08:00

类似 360IE 插件有个功能保存网页为图片。

v9ex

2018-01-17 11:47:51 +08:00

测试了下草榴，发现可以，服务器在香港？
https://ww4.sinaimg.cn/large/a15b4afegy1fnjgknhx3vj20dc0hs75d

zhtphoenix

2018-01-17 11:56:34 +08:00

@shenyu1996 是 puppeteer, 在 ubuntu 上跑的

LeungJZ

2018-01-17 11:57:29 +08:00

挂了。

zhtphoenix

2018-01-17 12:03:14 +08:00

@v9ex 阿里云新加坡服务器

stalon

2018-01-17 12:15:25 +08:00

https://developers.google.com/web/updates/2017/04/headless-chrome

Taking screenshots

To capture a screenshot of a page, use the --screenshot flag:

chrome --headless --disable-gpu --screenshot https://www.chromestatus.com/

# Size of a standard letterhead.
chrome --headless --disable-gpu --screenshot --window-size=1280,1696 https://www.chromestatus.com/

# Nexus 5x
chrome --headless --disable-gpu --screenshot --window-size=412,732 https://www.chromestatus.com/
Running with --screenshot will produce a file named screenshot.png in the current working directory. If you're looking for full page screenshots, things are a tad more involved. There's a great blog post from David Schnurr that has you covered. Check out Using headless Chrome as an automated screenshot tool .