追求截图的极致-牛牛截图再添新成员-截长图功能

很久没有写关于截图控件的文章了，借着这次截图控件新功能升级，向大家介绍一下牛牛截图！

大家知道，我们对于截图控件的功能性、易用性以及体验都有着非常高的要求，总结如下：

• 能力方面 我们支持多显示器、高清屏DPI放大支持、窗口区域的自动识别、多语言支持等等众多截图控件所不具备的能力
• 涂鸦功能方面 我们支持矩形、圆形、画刷、荧光笔、马赛克、文字等等功能，同时具备涂鸦二次编辑、文字及图片水印、工具栏自定义扩展功能等等非常实用的高价值能力
• 集成能力方面 我们支持集成进任意一款浏览器，支持集成进任何一个桌面软件中
• 平台兼容性方面 我们支持Windows、macOS以及Linux等所有主流操作系统，同时兼容不同架构下国产操作系统，真正做到全面兼容

今天，我们截图控件更进一步，新增加了一项大家都喜欢的功能-截长图，希望大家能够喜欢！

原理

截长图，顾名思义，就是能够选中有限的区域，然后利用鼠标滚动后，将原本未显示的区域也一并截取下来，并最终合并成一张完整的长图；它的应用范围也非常的广泛，比如信息分享、证据固定、数据存档等等。

从前期的技术调研、测试，到后来的功能开发与集成，最后进行细节完善、兼容性优化等处理，我们一共花了半个多月的时间；回过头来看，原理和流程大致如下：

• 利用现有截图中的截图区域选择功能，框选要截长图的区域

• 点击工具栏上指定按钮，触发截长图功能，定时的截取选中区域的图片，同时触发滚动条向下滚动 （实际应用中也可以不触发，而是人为的进行滚动）

• 每次截取下来的图片，在内存中利用opencv进行灰度化，然后对相邻的两张图片进行模式匹配，标记出来重叠的区域，在去掉重叠区域的前提下将两张图片进行合并

  因为图片的宽度都是一样的，所以只需要考虑高度上的重叠因素

• 停止截长图，将最终合成的图片复制到剪贴板，与原有截图流程进行对接

原理上来讲，不是太难，主要在于性能、内存、兼容性以及使用体验上的种种优化。

使用方法

目前我们已经上线了Windows的桌面版控件以及浏览器版本控件，大家如果喜欢，可以到我们的网站上进行体验，大致流程如下：

• 打开https://leeqia.com/screencapture/onlinedemo/
• 点击更多个性化选项，选中显示预截图窗口（因为是浏览器页面上测试体验，要截取的窗口可能被浏览器遮挡，所以应用此功能），点击屏幕截图按钮，根据提示安装新版本控件
• 截图功能呼出后，选择指定的窗口区域，注意不要选中不会滚动的区域（此处我们以我们的网站页面为例）
• 点击工具栏上的截长图按钮，此时目标窗口区域开始滚动，截长图功能正在进行中
• 点击完成，停止截长图，截好的图将会回送到浏览器页面中进行显示

完整的操作流程如下：

整个截长图流程保存下来的图片如下：

桌面版控件测试可以下载如下程序包：

http://leeqia.com/download/NiuniuCapture.zip

后记

目前我们只是在Windows平台上实现了截长图的功能，Linux以及macOS平台的截长图功能正在开发中，敬请期待！

牛牛截图从2014年上线第一版以来，已经过去了9年了，未来的路还很长，我们将继续砥砺前行！新功能上线不是结束，我们会持续进行迭代优化，努力打造全网最优秀的截图体验！