V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
codingMayCry
V2EX  ›  程序员

实现网页截图

  •  
  •   codingMayCry · 65 天前 · 4139 次点击
    这是一个创建于 65 天前的主题,其中的信息可能已经有所发展或是发生改变。

    求问大佬,有一个需求:

    是想实现截图给定的 url 网页,生成截图图片,找了一些资料,也找到了一个能实现效果的网站: https://urlbox.com/

    不过这个网站提供的是网页截图 API 服务,试用了一下,推测实现原理是请求对应的 URL ,拿到请求所有的服务器资源,然后在他这个网站的服务器上进行 SSR 后端渲染,生成 HTML ,转成图片。

    不过不确定是否实现的主要技术采用的是 SSR(server side rendering),所以求问大佬有没有懂的呀?

    或者实现网页截图有没有更好的思路呢?

    43 条回复    2024-05-11 10:52:50 +08:00
    visper
        1
    visper  
       65 天前   ❤️ 1
    puppeteer
    villivateur
        2
    villivateur  
       65 天前
    他这个需求用一个无头浏览器就能实现,之前我用无头 Chromium 试过。
    juzisang
        3
    juzisang  
       65 天前
    能跑后端用无头浏览器,puppeteer 之类的。如果纯浏览器环境用 html2canvas
    klo424
        4
    klo424  
       65 天前
    关键词 html2canvas 。

    其实截图实现随便搜都有好多,不知道难在哪?看你的描述,可能是难在搜索?

    另外,这种问题问 gpt 马上就有答案。
    gray0
        6
    gray0  
       65 天前
    @gray0 一个 api 搞定
    codehz
        7
    codehz  
       65 天前 via iPhone
    这玩意无论如何都得加钱,不如用 https://developers.cloudflare.com/browser-rendering/
    flyqie
        8
    flyqie  
       65 天前
    @klo424 #4

    截图方案确实挺多。

    前端做的话 html2canvas ,后端做的话上无头浏览器。

    记得之前还用类似这种网站玩了点花活。。无头真的每家配的都不一样。
    ik
        9
    ik  
       65 天前 via iPhone
    无头浏览器是可以的
    echoZero
        10
    echoZero  
       65 天前
    后端用无头试试,我之前试过没问题的
    weeei
        11
    weeei  
       65 天前   ❤️ 1
    Firefox: --screenshot [url]
    Chrome: --headless --screenshot=image.png [url]

    都支持知道窗口大小:--window-size=1024,2550
    codingMayCry
        12
    codingMayCry  
    OP
       65 天前
    @klo424 html2canvas 不行,主要是网页会有视频,html2canvas 这玩意儿截不到
    zuiyue123
        13
    zuiyue123  
       65 天前
    写过这个功能,是通过后台 puppeteer 实现截图的,实现起来很简单
    businessch
        14
    businessch  
       65 天前 via iPhone
    windows 用 python 搞了个自用,直接调用 edge 无头浏览器,搭建个服务 http 提交 url 返回图片,缺点自用满足
    ahswch
        15
    ahswch  
       65 天前
    puppeteer 无头浏览器 nodejs 搭一下就行
    laobobo
        16
    laobobo  
       65 天前
    之前用过 html2canvas 还是有点小瑕疵的,不过大部分场景是 ok 的!
    Sayonaracc
        17
    Sayonaracc  
       65 天前
    puppeteer 搭配 node 写后台接口,调用的时候传网页地址就可以生成一张图片,注意在服务器上需要配置 chrome 的环境,推荐使用 docker 集成
    royalknight
        18
    royalknight  
       65 天前
    html2canvas 会有跨域问题,puppeteer 运行资源消耗比较多
    abelmakihara
        19
    abelmakihara  
       65 天前
    html2canvas 问题不要太多 svg 的 css 的 各种奇奇怪怪的问题
    简单的截个二维码这种是没啥问题
    xiaoqian713
        20
    xiaoqian713  
       65 天前
    LavaC
        21
    LavaC  
       65 天前
    puppeteer 没问题的,我有个几年前写的微博图片接口就是用它写的。
    不过要注意的是别用 chromium ,要用 chrome ,否则视频可能解析不出来,字体也得另外配一个防止乱码。
    StateMa
        22
    StateMa  
       65 天前
    前端我常用的就 domtoimg 这个库,只要有 dom 就能扒
    luzemin
        23
    luzemin  
       65 天前
    @weeei 试了下 Chrome headless 命令 无法截取 full page
    BaymaxK
        24
    BaymaxK  
       65 天前   ❤️ 2
    纯前端截图的话,最好的方法是通过 webrtc 实现。可以看看这个插件: https://www.kaisir.cn/js-screen-shot
    iMusic
        25
    iMusic  
       65 天前
    @StateMa 我觉得比 html2canvas 好
    Jasonwxy
        26
    Jasonwxy  
       64 天前
    这个我老早之前用 puppeter 写过一个截图的 node 服务
    然后上面说的 html2canvas 前一段时间也用过,感觉样式问题挺多,好多 css 属性不支持...
    https://html2canvas.hertzen.com/features 下面就有列 Unsupported CSS properties
    Jame00001
        27
    Jame00001  
       64 天前
    网页截图跨域问题无法解决。因此他们都放到服务端解析。
    Jame00001
        28
    Jame00001  
       64 天前
    比如目标网页包含第三方链接,或者包含地图,那你截出来的就是空白。
    Kakus
        29
    Kakus  
       64 天前
    前段时间刚好写过一个这样的工具,用的这个库:

    https://www.npmjs.com/package/capture-website
    imcsk
        30
    imcsk  
       64 天前
    用 Chrome 自带的截图行不行
    caesar
        31
    caesar  
       64 天前
    之前开发过一个,也是调用的,不过是生成缩略图的,稍微改下 就可以满足你要求
    hetal
        33
    hetal  
       64 天前
    zgsi
        34
    zgsi  
       64 天前
    提供一个思路 wkhtmltopdf
    CHTuring
        35
    CHTuring  
       64 天前
    不要用 html2canvas 各种小问题不断,用 https://www.npmjs.com/package/html-to-image
    ginobefun
        36
    ginobefun  
       64 天前
    好奇这个需求什么场景用?
    hetal
        37
    hetal  
       64 天前
    @ginobefun 做分享海报等复杂的图片生成
    hazardous
        38
    hazardous  
       64 天前
    codingMayCry
        39
    codingMayCry  
    OP
       64 天前
    感谢各位大佬的回复,提供了非常多的思路,这边先准备用 Puppeteer 搭一个 nodejs 服务来实现了~
    looo
        40
    looo  
       64 天前
    Mac Arc 浏览器的内置的截图好用
    JRay
        41
    JRay  
       64 天前
    我之前是用的浏览器驱动直接访问截图,感觉还好
    gitai
        42
    gitai  
       64 天前
    fionasit007
        43
    fionasit007  
       64 天前
    几年前用过 PhantomJS ,是基于 WebKit ,不过现在貌似已经过时,但是部署起来比较麻烦,使用坑也多;现在选择的话直接自动化无头浏览器一把梭吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2380 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 04:22 · PVG 12:22 · LAX 21:22 · JFK 00:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.