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

V2EX = way to explore

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

For Existing Member Sign In

爱意满满的作品展示区。

This topic created in 3029 days ago, the information mentioned may be changed or developed.

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

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

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

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

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

Supplement 1 · Jan 16, 2018

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

Supplement 2 · Jan 17, 2018

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

Supplement 3 · Jan 17, 2018

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

Supplement 4 · Jan 18, 2018

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

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

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

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

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

生成

把玩

网页

截图

50 replies • 2019-06-16 10:18:05 +08:00

onsale

Jan 16, 2018

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

onsale

Jan 16, 2018

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

zhtphoenix

Jan 16, 2018

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

7654

Jan 16, 2018

用这个可以上班摸鱼哈

Sanko

Jan 16, 2018 via Android

花式看 yellow pic

northisland

Jan 16, 2018

@我扶奶奶过哈登

zhtphoenix

Jan 16, 2018

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

zhtphoenix

Jan 16, 2018

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

AlwaysBee

Jan 16, 2018

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

Pudge1337

Jan 16, 2018 via Android

不错，好玩！

miaomiao888

Jan 17, 2018

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

NUT

Jan 17, 2018

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

mclxly

Jan 17, 2018

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

shapl

Jan 17, 2018

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

kimown

Jan 17, 2018

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

nine99

Jan 17, 2018

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

zgx030030

Jan 17, 2018

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

whileFalse

Jan 17, 2018

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

253874

Jan 17, 2018

不错

keventseng

Jan 17, 2018

这是已经崩了吗？

shenyu1996

Jan 17, 2018

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

julu

Jan 17, 2018

体验了下，很实用

Sunrise837

Jan 17, 2018

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

v9ex

Jan 17, 2018

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

zhtphoenix

Jan 17, 2018

@shenyu1996 是 puppeteer, 在 ubuntu 上跑的

LeungJZ

Jan 17, 2018

挂了。

zhtphoenix

Jan 17, 2018

@v9ex 阿里云新加坡服务器

stalon

Jan 17, 2018

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 .