V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ipoh
V2EX  ›  前端开发

请教下前端网页截图是怎么实现的

  •  
  •   ipoh · 2017-06-22 15:23:55 +08:00 · 3445 次点击
    这是一个创建于 2688 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在知乎上面点击“建议反馈”的时候弹出的窗口可以把用户当前的网页截成图片,请问这个是怎么实现的呢?

    7 条回复    2017-06-23 02:11:57 +08:00
    SourceMan
        1
    SourceMan  
       2017-06-22 15:32:20 +08:00
    html2canvas
    smallyin
        2
    smallyin  
       2017-06-22 15:33:02 +08:00   ❤️ 1
    参考这里:
    https://juejin.im/entry/58b91491570c35006c4f7fdf

    有 2 种实现,
    1 ) canvas 实现: https://github.com/niklasvh/html2canvas
    2 ) svg 实现: https://github.com/cburgmer/rasterizeHTML.js

    至于知乎,好像是 canvas
    ChefIsAwesome
        3
    ChefIsAwesome  
       2017-06-22 15:34:36 +08:00
    用 js 给网页截图这种事指不定哪天就给封了。毕竟不太安全。
    smallyin
        4
    smallyin  
       2017-06-22 15:40:22 +08:00
    @smallyin 简书也有一个「下载长微博图片」的功能,只能说和这个“有点像”
    看了下,应该是在服务端存放的已经渲染好图片(并做了缓存?),下载那个按钮只是个静态图片的链接
    mengxy
        5
    mengxy  
       2017-06-22 15:47:30 +08:00
    @smallyin 简书那个和这个题目提到的是两类问题。简书的实现大概是在服务端使用 headless 浏览器,比如 phantomjs 或者新版本的 chrome 来渲染页面并截图,直接输出或者缓存后输出。楼主说的其实就是 html2canvas 这种浏览器内的截图。
    smallyin
        6
    smallyin  
       2017-06-22 15:55:56 +08:00
    @mengxy 嗯嗯,是的,我在 2# 也说了
    提到简书这个,只是拓展一下,确实不是问题答案,哈哈,所以我也说了只是“有点像”(带引号)
    jasonliao
        7
    jasonliao  
       2017-06-23 02:11:57 +08:00
    之前写了一个小 gist,使用 phantomjs 截取整个有延时加载资源的网页。https://gist.github.com/jasonliao/5260257293284b8dccc127fd5f9c2d0f

    如果单纯的截取一屏,设定一下 `page.clipRect` 就可以了 http://phantomjs.org/screen-capture.html 这里也有 demo
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1264 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 23:20 · PVG 07:20 · LAX 16:20 · JFK 19:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.