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

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

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

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

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

原理

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

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

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

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

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

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

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

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

使用方法

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

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

完整的操作流程如下:

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

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

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

后记

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

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

猜你喜欢

转载自blog.csdn.net/TragicGuy/article/details/129714039
今日推荐