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

[zhangkui]

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

[archxm]

内存里渲染啊，然后获取 dc

[zhangkui]

@archxm 能详细一点吗？用 electron 怎么操作？

[icaolei]

QQ NT 不就是 electron 么

[zhangkui]

@icaolei 可是，它是怎么实现长截图的呢？

[dbit]

发送向下滚动的热键呢

[zhangkui]

@dbit 可以展开说一说吗？

[xtreme1]

pc 上应该是滚动时截取屏幕然后拼接, 找重叠区域得用 opencv 之类的

[wind1986]

puppeteer 可以做, electron 不知道是否支持

[archxm]

@xtreme1 应该不至于，这玩意，可以弄个后台窗口，强制渲染，先设置好窗口大小，以免出现滚动条。
渲染完，获取窗口的 dc ，然后弄出图片就很容易了。

[zhangkui]

@xtreme1 《重叠区域》 是一个难点，因为不太可能完全一样，感觉实现不太完美

[thetbw]

有没有一种可能，截图这部分代码，是直接 x86 版 qq 搬过来的

[xtreme1]

@archxm #9
OP 举例的 pc qq 应该是这样搞的, 比如网页上有一些可以收起/展开的元素, 点击展开时会先向下滚动一些, 然后提示 "无效区域", 如果不是这样实现的, 不好解释.

[jifengg]

刚用 Tim 试了一下，只支持“鼠标滚轮”滚动截屏，而且有时候滚太快会截不全。猜测，应该是捕获了滚轮事件传给了其他窗口，并实时监测截屏区域的变化进行增量叠加。
我又试了一下，用 js 控制页面缓慢滚动，你开启长截图，不动鼠标滚轮，tim 截图也会加，所以应该是实时获取截取区域做了比较

[moyupoi10]

滚动截图没那么简单，不是滚动到下面自动拼接就完了，实际最核心的还是如何识别上下图的链接点，要一直做图像识别，否则无法完美做到滚动截屏

[hokori]

有些浏览器插件都能长截图吧

[corcre]

需要上下图的链接点吗, (以下纯属脑补, 没实现过)开始截图的时候禁用滚动事件算出高度每次截取定高的图像然后向下和混动固定距离最后加上尾部的图像再做拼接?

[Imindzzz]

@moyupoi10 如果能监听到具体浮动了多少像素，拼接就变成简单的加减计算了吧

[imagecap]

以前做过 chrome 插件截全屏，通过滚动条滚动截屏， 首先是创建一个全屏的画布，每截屏一次滚动下一屏， 重复，直到最后一页， 不需要去重，画的时候贴着底边画就可以了。 浏览器画图存在一个问题就是内存扛不住。最后浏览器截图，弄了个客户端直接写到文件，效果还可以。

[zhangkui]

@imagecap @hokori chrome 插件 是可以调取 内置 4 种 Chrome 截图指令功能：
1. Capture full size screenshot：长截图
2.Capture screenshot：一般截图
3.Capture node screenshot：预览截图
4.Capture area screenshot：自选区域截图

[lizhenda]

之前调研过，可以看看这篇文章的分析：
《 Electron 截屏方案分析》
https://vastiny.com/post/hyukway2qxvmwwt5.html