V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
zhtphoenix
V2EX  ›  分享创造

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

  •  2
     
  •   zhtphoenix · 2018-01-16 20:36:03 +08:00 · 10065 次点击
    这是一个创建于 2507 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近偶然看到很强大的网页抓取工具 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
        1
    onsale  
       2018-01-16 20:40:01 +08:00
    zhtphoenix
        3
    zhtphoenix  
    OP
       2018-01-16 20:44:39 +08:00
    @onsale 下一步可以做抓取页面内容进行分析
    7654
        4
    7654  
       2018-01-16 20:46:12 +08:00
    用这个可以上班摸鱼哈
    Sanko
        5
    Sanko  
       2018-01-16 20:46:26 +08:00 via Android
    花式看 yellow pic
    northisland
        6
    northisland  
       2018-01-16 20:46:37 +08:00
    @我扶奶奶过哈登
    zhtphoenix
        7
    zhtphoenix  
    OP
       2018-01-16 20:52:08 +08:00
    兄弟们太火爆了,把我服务器搞挂了。。并发时性能还有问题
    zhtphoenix
        8
    zhtphoenix  
    OP
       2018-01-16 20:54:08 +08:00
    得先优化一下并发的性能了
    AlwaysBee
        9
    AlwaysBee  
       2018-01-16 20:57:14 +08:00
    不错啊,之前一直用着 Full page screen capture 这个插件
    Pudge1337
        10
    Pudge1337  
       2018-01-16 23:52:48 +08:00 via Android
    不错,好玩!
    miaomiao888
        11
    miaomiao888  
       2018-01-17 04:30:58 +08:00
    NUT
        12
    NUT  
       2018-01-17 08:58:07 +08:00
    ajax 这种没处理好。 都是白的
    mclxly
        13
    mclxly  
       2018-01-17 08:58:12 +08:00
    提个建议: 我之前想做的,是每天发送一张截图给微信,例如 jd 的产品价格页。
    shapl
        14
    shapl  
       2018-01-17 09:08:27 +08:00
    怎么自己发了那么多请求???
    kimown
        15
    kimown  
       2018-01-17 09:13:49 +08:00
    LZ 是依据什么判断页面已经加载完毕,然后截图的,例如页面是纯数据填充的,但由于网速,后端接口需要 10s 后才返回,那 LZ 什么时候截图呢
    nine99
        16
    nine99  
       2018-01-17 09:19:16 +08:00
    好厉害!!非常好用!!就是如果需要登入的网站是不是就用不了?
    zgx030030
        17
    zgx030030  
       2018-01-17 09:51:56 +08:00
    @nine99 确实是,试了下某乎,截到的是登录框
    whileFalse
        18
    whileFalse  
       2018-01-17 09:52:26 +08:00
    看楼主的域名,果断生成了个 91p0rn 的截图。
    timeisweapon
        19
    timeisweapon  
       2018-01-17 09:54:58 +08:00
    不错
    keventseng
        20
    keventseng  
       2018-01-17 10:34:58 +08:00
    这是已经崩了吗?
    shenyu1996
        21
    shenyu1996  
       2018-01-17 11:07:49 +08:00
    使用的 puppeteer 么?后台的服务器是 linux 么,昨天我也在搞这个抓了下 b 站我账号下的动态更新,windows 下运行没问题,但是想跑在服务器上有点麻烦
    julu
        22
    julu  
       2018-01-17 11:18:53 +08:00
    体验了下,很实用
    Sunrise837
        23
    Sunrise837  
       2018-01-17 11:22:39 +08:00
    类似 360IE 插件有个功能 保存网页为图片。
    v9ex
        24
    v9ex  
       2018-01-17 11:47:51 +08:00
    测试了下草榴,发现可以,服务器在香港?
    https://ww4.sinaimg.cn/large/a15b4afegy1fnjgknhx3vj20dc0hs75d
    zhtphoenix
        25
    zhtphoenix  
    OP
       2018-01-17 11:56:34 +08:00
    @shenyu1996 是 puppeteer, 在 ubuntu 上跑的
    LeungJZ
        26
    LeungJZ  
       2018-01-17 11:57:29 +08:00
    挂了。
    zhtphoenix
        27
    zhtphoenix  
    OP
       2018-01-17 12:03:14 +08:00
    @v9ex 阿里云新加坡服务器
    stalon
        28
    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 .
    ArchiTech
        29
    ArchiTech  
       2018-01-17 15:25:53 +08:00
    和我最近做的这个原理一样呀~ https://www.v2ex.com/t/416516

    楼主有机会咱们可以交流交流~
    marcomarco
        30
    marcomarco  
       2018-01-17 15:40:03 +08:00
    有点意思,收藏了,希望拓展出更多功能,比如一键给整站截图 手动斜眼
    hydyy
        31
    hydyy  
       2018-01-17 15:45:20 +08:00
    好玩好玩
    jkjoke
        32
    jkjoke  
       2018-01-17 15:51:40 +08:00
    挺不错的
    MonoLogueChi
        33
    MonoLogueChi  
       2018-01-17 16:26:02 +08:00 via Android
    woffee
        35
    woffee  
       2018-01-17 18:26:06 +08:00
    上班呢,楼上干什么呢(斜眼笑
    livc
        36
    livc  
       2018-01-17 19:53:11 +08:00
    不错,收藏了。
    nexusone
        37
    nexusone  
       2018-01-17 20:08:22 +08:00
    楼主的这个很 nice 啊,但是楼上的咱就别拿黄网做测试了
    zhtphoenix
        38
    zhtphoenix  
    OP
       2018-01-17 20:23:59 +08:00
    @nexusone 老实说我做了这个后,才发现了好多本来不知道的小黄网,精神食粮更丰富了,感谢兄弟们
    exuxu
        39
    exuxu  
       2018-01-17 21:10:25 +08:00
    什么?小黄网,哪里哪里?
    shawn2333
        41
    shawn2333  
       2018-01-18 00:19:17 +08:00 via iPhone
    需要点一下“阅读全文”的怎么搞
    mydns
        42
    mydns  
       2018-01-18 08:53:52 +08:00
    pandasoda
        43
    pandasoda  
       2018-01-18 09:22:31 +08:00
    做的不错,就是截图的网站标题有些移位
    zhtphoenix
        44
    zhtphoenix  
    OP
       2018-01-18 13:49:47 +08:00
    @pandasoda 已经 fix, 谢谢
    laoganbu
        45
    laoganbu  
       2018-01-18 17:46:30 +08:00
    一些建议:
    1.自动补全 http://
    2.params 支持中文
    3.自动加载更多时,等它加载完再截图
    4.有些网站需要登录
    5.屏蔽一些关键词 47xxxxx62
    zhtphoenix
        46
    zhtphoenix  
    OP
       2018-01-19 02:55:12 +08:00
    @ArchiTech 赞赞赞
    zhtphoenix
        47
    zhtphoenix  
    OP
       2018-01-19 03:00:15 +08:00
    @laoganbu 难得的建设性意见,谢谢
    mervin24
        48
    mervin24  
       2018-01-25 13:12:39 +08:00
    检测广告法不错 加淘宝天猫上广告法检测
    livc
        49
    livc  
       2018-02-24 12:41:53 +08:00
    这么快就挂了?
    xshwy
        50
    xshwy  
       2019-06-16 10:18:05 +08:00
    不知道怎么刷到这条,发现现在成了瑟情网站…
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1022 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 21:11 · PVG 05:11 · LAX 13:11 · JFK 16:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.