点击蓝字

关注我们

1、概述

要使用屏幕截图，其实很容易，装一款聊天软件或者办公软件就可以了，比如QQ、企业微信、钉钉、飞书等。但要开发出类似这些软件的屏幕截图模块，则没那么容易。其实实现屏幕截图的技术并不复杂，主要是在各个细节问题的处理上。

本文将结合开发屏幕截图的实际项目经历，详细介绍一下屏幕截图各个主要功能点的实现细节与方法，给大家提供一个借鉴和参考。

2、屏幕截图的主要功能点

一个具有完备功能的屏幕截图应该包含以上多个功能点，比如桌面灰化、窗口自动套索、区域放大、矩形等多个图元绘制、输入文字等。

3、屏幕截图的主体实现思路

那屏幕截图的主体实现思路到底是什么样子的呢？下面我们就来简单地描述一下。我们实现的一套屏幕截图的效果如下

下面基于我们实现的屏幕截图，详细介绍一下屏幕截图主要的一些功能点和实现思路。 

3.1、截图主窗口全屏置顶

我们需要创建一个截图的主窗口，开启截图后将该截图主窗口全屏，覆盖整个屏幕，并且给窗口设置TopMost置顶属性。然后我们后续操作都是在这个全屏置顶的窗口上进行绘图出来的，即截图时截图窗口中看到的所有内容（比如桌面灰化、窗口套索、区域放大、各个图元等）都是绘制上去的！

3.2、桌面灰化

在开启截图时，先将当前桌面上的图像保存到位图对象中，保存两份位图，一份是亮色的桌面图像，一份是经过灰化后的桌面图像。先将灰化的位图绘制到截图对话框上，实现灰化的遮罩。然后根据用户拉动鼠标选择的区域，从亮色位图中抠出对应区域的亮色图像绘制到对话框上，就能达到区域选择的效果了。

3.3、窗口自动套索

 在启动截图时，需要遍历当前系统中所有打开的窗口，以及这些窗口中的子窗口，把这些窗口的坐标位置记录下来保存到内存中。当鼠标移动时，看鼠标移动到哪个最上层的窗口，然后在该窗口的区域绘制上套索的边界，并将该窗口区域“亮”起来。亮起来其实很简单，根据该窗口的坐标到内存中保存的亮色位图中将对应的区域抠出来，绘制到窗口上，然后再在窗口边界上绘制出套索边界线即可。

3.4、区域放大

 其实实现这个功能并不难，可以仔细观察以下主流IM软件的显示细节，就能找到思路和答案了！区域放大是实时地将鼠标移动到的位置的周围区域放大，放大的区域是以鼠标点为中心的一小片矩形区域，然后将该区域放大4倍，将放大的效果绘制到截图对话框上。

可以使用微软MFC库中提供的橡皮筋类CRectTracker来实现区域的选择。该橡皮筋类对应一个选择边框，通过拉动鼠标，绘制出选择区域的橡皮筋边框，橡皮筋边框支持拖动，改变橡皮筋边框的大小。根据橡皮经选择的区域，到内存中保存的亮色位图中抠出亮色选择区域，绘制到截图窗口上就好了。

3.6、截图工具条

截图工具条一般做成一个紧贴截图选择区域的窗口，窗口中包含一排功能按钮，一般包括矩形工具、椭圆工具、带箭头直线工具、曲线工具、Undo工具、关闭截图、完成截图这几个功能按钮。选择矩形工具、椭圆工具、带箭头直线工具和曲线工具这四个按钮后，鼠标在截图窗口上绘制的就是对应类型的图元。Undo按钮是回撤上一次绘制的图元。

3.7、矩形等图元的绘制

  我们需要设计图元类型对应的C++类，这些类统一继承于一个CSharp的基类，基类中保存当前绘制图元的线条颜色、起点和终点坐标，还有一个用于绘制图元内容的纯虚接口Draw，具体的Draw操作都在具体的图元中实现。这其实使用C++中多态的概念。

对于矩形、椭圆和带箭头的直线，我们只需要记录图元的起点和终点坐标就可以了，对于曲线，则由多个直线线段构成的，我们要记录绘制过程中的多个点。当用户左键按下时开始绘制图元，记录此时图元起点坐标，在左键弹起时截图当前图元的绘制，记录图元的终点坐标，然后创建对应类型的图元对象，将起点及终点坐标保存到对象中，然后把这些图元对象保存到图元列表中。窗口需要刷新时，调用列表中这些图像的Draw接口将所有图元绘制到截图窗口上。

4、桌面灰化的实现细节

开启截图时，将桌面的图像保存到亮色位图对象中，同时对图像进行灰化处理，将处理后的图像保存到暗色位图对象中。保存桌面图像的代码如下所示：

 如何将桌面图像进行灰化处理呢？其实很简单，只要将保存的桌面位图中的每个像素值的RGB读出来，将每个像素中的R、G、B值都乘以一个系数，然后再将这些值设置回位图中即可，相关代码如下：

 内存中要保留两份位图，一份是亮色的桌面图像，一份是经过灰化后的桌面图像。先将灰化的位图绘制到截图对话框上，实现灰化的遮罩。然后根据用户拉动鼠标选择的区域，从亮色位图中抠出对应区域的亮色图像绘制到对话框上，就能达到区域选择的效果了。

5、窗口自动套索实现

在启动截图时，需要遍历当前系统中所有打开的窗口，以及这些窗口中的子窗口，把这些窗口的坐标位置记录下来保存到内存中。先调用系统API函数EnumWindows，将系统中打开的窗口都枚举出来：

然后再遍历这些窗口，使用递归调用的方式找出这些主窗口的各个子窗口，记录下这些子窗口的信息。

当鼠标移动时，根据鼠标的位置坐标，到窗口信息列表中去遍历，看鼠标移动到哪个最上层的窗口，然后在该窗口的区域绘制上套索的边界，并将该窗口区域“亮”起来。亮起来其实很简单，根据该窗口的坐标到内存中保存的亮色位图中将对应的区域抠出来，绘制到窗口上，然后再在窗口边界上绘制出套索边界线即可。

6、区域放大实现

实现这点也不难，可以仔细观察以下主流IM软件的显示细节，就能找到思路与方法了！区域放大是实时地将鼠标移动到的位置的周围区域放大，放大的区域是以鼠标点为中心的一小片矩形区域。

确定待放大区域的坐标后，从内存中保存的桌面亮色位图中抠出亮色的待放大区域，然后调用StretchBlt将放大后的图像绘制到截图窗口上，相关代码如下：

7、截取区域的选择

微软MFC库中的橡皮筋类CRectTracker是个好东西，绘制出来的是个有边框线的矩形边界线，边框线上有八个点可以用鼠标点击拖动来改变矩形边界线的大小。我们正可以使用这个橡皮筋类来实现截图区域的选择。

橡皮筋类CRectTracker实现的有点复杂，也很巧妙，我们将该类的代码从MFC库中拿出来，对其进行一些简单灵活的改造，就可以用到截图模块中。添加一些消息通知和额外的处理机制。抠出来的类，我们命名为CCatchTracker，其头文件如下所示：

 根据橡皮经选择的区域，到内存中保存的亮色位图中抠出亮色选择区域，绘制到截图窗口上就好了。截图工具条是紧贴着橡皮筋选择区域的，位于该区域的下方，当橡皮筋区域大小发生变化时，要通知截图工具条窗口跟着截图区域一起动，使截图工具条紧跟着橡皮筋选择区域。所以我们在橡皮筋类中抛出如下的通知消息：

具体的Draw操作都在具体的图元中实现。这其实使用C++中多态的概念。

以矩形图元为例，矩形类CRectangle的头文件如下：

cpp源文件的代码如下：

对于矩形、椭圆和带箭头的直线，我们只需要记录图元的起点和终点坐标就可以了，对于曲线，则由多个直线线段构成的，我们要记录绘制过程中的多个点。当用户左键按下时开始绘制图元，记录此时图元起点坐标，在左键弹起时截图当前图元的绘制，记录图元的终点坐标，然后创建对应类型的图元对象，将起点及终点坐标保存到对象中，然后把这些图元对象保存到图元列表中。窗口需要刷新时，调用列表中这些图像的Draw接口将所有图元绘制到截图窗口上。

最开始我们是使用GDI函数绘制图元的，比如GDI中的API函数Reactangle（绘制矩形）、Ellipse（绘制椭圆）等，但在绘制带箭头的直线和曲线时，GDI函数绘制出来的结果中有明显的锯齿，效果很不好。所以后来我们将图元的绘制全部改成使用GDI+库来处理，GDI+中的Graphics类在绘制图元时，可以设置反锯齿的模式：

9、截图窗口的绘制机制

整个全屏置顶的截图主窗口上面显示的所有内容都是都是我们在截图窗口中绘制出来的，比如窗口的自动套索效果、区域放大效果、截图区域的橡皮筋选择框、各种图元的绘制等。

我们要在截图窗口上接管所有内容的绘制，需要拦截截图窗口的WM_ERASEBKGND和WM_PAINT消息。首先在收到WM_ERASEBKGND消息后，直接return TRUE，不需要系统帮我们绘制背景：

在收到WM_PAINT消息时，使用双缓冲绘制去绘制截图窗口上要绘制的内容。所谓双缓冲绘图的思想是，先将所有需要绘制的内容绘制到内存DC上，这些绘制可能需要时间，然后再将内存DC中的内容绘制到窗口（DC）上。双缓冲绘图是解决绘制时窗口闪烁的有效方法。

       在处理WM_PAINT消息时，需要调用BeginPaint和EndPaint在绘制完窗口后将窗口的无效区域清空，切记要记得调用这两个函数。如果不调用这两个接口，会导致窗口一直有无效区域，这样系统一直都检测到窗口有无效区域，一直在不断地产生WM_PAINT消息，这样程序一直在忙于处理WM_PAINT消息，导致低优先的WM_TIMER消息被淹没被丢弃，界面由于在不断绘制会产生严重的闪烁问题。在我们的OnPaint函数中，我们使用到了CPaintDC类，该类中封装了对BeginPaint和EndPaint的调用：

有时我们在某些操作后，我们想让窗口立即刷新，可以组合调用InvalidateRect和UpdateWindow，InvalidateRect是让窗口无效，UpdateWindow是让系统立即产生WM_PAINT消息，并将WM_PAINT投递到窗口过程（不是将WM_PAINT放到消息队列中等待处理），这样窗口能立即刷新。调用UpdateWindow就相当于让窗口立即强制刷新。

有多种退出截图的场景，不同的退出场景可能需要有不同的后续处理，所以我们定义了多种退出截图时的类型：

1）按下ESC键退出、右键点击退出、保存图片退出、点击取消按钮退出、截取区域为空退出

这些场景下退出截图，截图模块不需要任何处理，都是单纯的退出截图。

2）双击截图区域退出截图、点击完成按钮退出截图

这些场景下,在退出截图之前，会将截取区域的图片位图保存到剪切板中，同时将截图保存到磁盘文件中。退出截图后，如果是聊天框中的截图入口触发的，需要将截取的图片自动插入到聊天框中。

3）内存不足截图失败退出

这种场景是因为系统内存不足导致GDI函数调用失败，外部需要弹出“截图失败，可能是系统内存不足引起的，退出部分程序后再试”的提示。

所以我们根据这些退出的场景设计了对应的退出类型，在退出截图时设置退出类型，并提供获取退出截图时退出类型的接口GetQuitType，这样在退出截图后，外部调用GetQuitType获取当前截图退出的类型，看是否需要进行后续的处理。

11、创建位图时将CreateCompatibleBitmap替换成CreateDIBSection

最开始我们再代码中创建位图时调用的是CreateCompatibleBitmap，但是该接口在系统内存不是很充足的时候会经常返回失败，在日常的测试中经常遇到。通过GetLastError获取到CreateCompatibleBitmap调用失败后的错误码是8：

该错误码的描述如上，意思就是当前系统的可用内存空间不多了，而调用CreateCompatibleBitmap创建位图时需要申请一定的内存空间，空间不够时该函数就会返回失败了。

经后来查阅相关资料得知，袁峰老师在他编写的《Windows图形编程》一书中提过，CreateCompatibleBitmap创建的文图是DDB位图，是依赖设备的设备相关位图，是从内核地址空间中分配的，而内核内存资源比较有限，建议使用CreateDIBSection来创建位图，书中的具体描述如下：

CreateDIBSection创建的位图是DIB位图，是不依赖于设备的设备无关位图，是从用户态地址空间中的虚拟内存中分配的，限制比较少，一般都会成功。所以后来我们封装了一个创建位图的接口，如下：

本文讲述了屏幕截图中的一些实现思路与细节，但在实际实现时的细节比上面说的多的多！

在源码中，我们将截图模块封装成一个dll，并提供了一个调用dll接口的工程TestScreenCatch（该工程和截图dll均提供完整的C++源码），调用截图dll接口的代码如下：

戳“阅读原文”我们一起进步