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

用 electron 实现类似 QQ 的长截图(滚动截图)有办法吗?

  •  
  •   zhangkui · 2023-09-06 09:22:48 +08:00 · 2741 次点击
    这是一个创建于 463 天前的主题,其中的信息可能已经有所发展或是发生改变。

    本人现在在做 pear-rec ( https://github.com/027xiguapi/pear-rec ),一个用 electron 可以截图和图片编辑查看的跨平台软件,现在想实现实现类似 QQ 的长截图(滚动截图),一直没有思路,大佬们,有知道怎么实现的吗? 1693963274597.jpg

    20 条回复    2023-09-06 15:36:06 +08:00
    archxm
        1
    archxm  
       2023-09-06 09:24:12 +08:00
    内存里渲染啊,然后获取 dc
    zhangkui
        2
    zhangkui  
    OP
       2023-09-06 09:26:04 +08:00
    @archxm 能详细一点吗?用 electron 怎么操作?
    icaolei
        3
    icaolei  
       2023-09-06 09:38:37 +08:00
    QQ NT 不就是 electron 么
    zhangkui
        4
    zhangkui  
    OP
       2023-09-06 09:52:08 +08:00
    @icaolei 可是,它是怎么实现长截图的呢?
    dbit
        5
    dbit  
       2023-09-06 09:52:31 +08:00 via Android
    发送向下滚动的热键呢
    zhangkui
        6
    zhangkui  
    OP
       2023-09-06 09:54:16 +08:00
    @dbit 可以展开说一说吗?
    xtreme1
        7
    xtreme1  
       2023-09-06 09:55:11 +08:00
    pc 上应该是滚动时截取屏幕然后拼接, 找重叠区域得用 opencv 之类的
    wind1986
        8
    wind1986  
       2023-09-06 10:04:49 +08:00
    puppeteer 可以做, electron 不知道是否支持
    archxm
        9
    archxm  
       2023-09-06 10:04:54 +08:00
    @xtreme1 应该不至于,这玩意,可以弄个后台窗口,强制渲染,先设置好窗口大小,以免出现滚动条。
    渲染完,获取窗口的 dc ,然后弄出图片就很容易了。
    zhangkui
        10
    zhangkui  
    OP
       2023-09-06 10:09:40 +08:00
    @xtreme1 《重叠区域》 是一个难点,因为不太可能完全一样,感觉实现不太完美
    thetbw
        11
    thetbw  
       2023-09-06 10:17:05 +08:00
    有没有一种可能,截图这部分代码,是直接 x86 版 qq 搬过来的
    xtreme1
        12
    xtreme1  
       2023-09-06 10:19:06 +08:00
    @archxm #9
    OP 举例的 pc qq 应该是这样搞的, 比如网页上有一些可以收起/展开的元素, 点击展开时会先向下滚动一些, 然后提示 "无效区域", 如果不是这样实现的, 不好解释.
    jifengg
        13
    jifengg  
       2023-09-06 10:33:34 +08:00
    刚用 Tim 试了一下,只支持“鼠标滚轮”滚动截屏,而且有时候滚太快会截不全。猜测,应该是捕获了滚轮事件传给了其他窗口,并实时监测截屏区域的变化进行增量叠加。
    我又试了一下,用 js 控制页面缓慢滚动,你开启长截图,不动鼠标滚轮,tim 截图也会加,所以应该是实时获取截取区域做了比较
    moyupoi10
        14
    moyupoi10  
       2023-09-06 11:34:21 +08:00
    滚动截图没那么简单,不是滚动到下面自动拼接就完了,实际最核心的还是如何识别上下图的链接点,要一直做图像识别,否则无法完美做到滚动截屏
    hokori
        15
    hokori  
       2023-09-06 11:36:22 +08:00
    有些浏览器插件都能长截图吧
    corcre
        16
    corcre  
       2023-09-06 13:27:55 +08:00
    需要上下图的链接点吗, (以下纯属脑补, 没实现过)开始截图的时候禁用滚动事件算出高度每次截取定高的图像然后向下和混动固定距离最后加上尾部的图像再做拼接?
    Imindzzz
        17
    Imindzzz  
       2023-09-06 13:42:55 +08:00 via Android
    @moyupoi10 如果能监听到具体浮动了多少像素,拼接就变成简单的加减计算了吧
    imagecap
        18
    imagecap  
       2023-09-06 13:50:42 +08:00
    以前做过 chrome 插件截全屏,通过滚动条滚动截屏, 首先是创建一个全屏的画布,每截屏一次滚动下一屏, 重复,直到最后一页, 不需要去重,画的时候贴着底边画就可以了。 浏览器画图存在一个问题就是内存扛不住。最后浏览器截图,弄了个客户端直接写到文件,效果还可以。
    zhangkui
        19
    zhangkui  
    OP
       2023-09-06 13:59:49 +08:00   ❤️ 1
    @imagecap @hokori chrome 插件 是可以调取 内置 4 种 Chrome 截图指令功能:
    1. Capture full size screenshot:长截图
    2.Capture screenshot:一般截图
    3.Capture node screenshot:预览截图
    4.Capture area screenshot:自选区域截图
    lizhenda
        20
    lizhenda  
       2023-09-06 15:36:06 +08:00   ❤️ 1
    之前调研过,可以看看这篇文章的分析:
    《 Electron 截屏方案分析》
    https://vastiny.com/post/hyukway2qxvmwwt5.html
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5302 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 03:19 · PVG 11:19 · LAX 19:19 · JFK 22:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.