[vs+qt+opencv]手把手做GUI图像采集及处理UI交互界面

目录

1、项目概述

2、详尽步骤

2.1、新建项目

2.1、编写主程序

2.1.1、testgui.ui的绘制

2.1.2、给UI赋予功能

3、总结

---

 

温馨提示，这里是最初的一次尝试，如果你想要用qt进行GUI的界面编程，建议直接用qt，就不要和vs配合着使用了，会更加好用。可参考这里：https://gitbook.cn/new/gitchat/activity/5cb5c29604db077a63871661

1、项目概述

首先说明下工作平台vs2013+opencv2.4.9+qt5.7（后文附完整代码，可下载直接运行）

功能：如题

1. GUI图像采集及处理UI交互界面
2. 点击采集图像和处理，在这里只做灰度化做演示

先看看直观效果界面，这也就是最后成功的样子。

1. 点击“开始”按钮，采集图像
2. 点击“处理”按钮，进行灰度化操作
3. 点击“结束”按钮，关闭窗口

2、详尽步骤

下面我们就开始，尽量详尽的手把手带你第一次完成GUI界面版本的图像处理。

2.1、新建项目

点击“新建项目”->选择“模块”，命名为testgui（名称可自己定义为自己喜欢的，以区别于其他），一直下一步，直到确定完成 。

2.1、编写主程序

开始编写我们真个程序段部分。main.cpp 主函数就这个样子，系统自己创建的，不用改，就这样

重点关注 testgui.cpp  、 testgui.h 和 testgui.ui 这是我们做设计的主要部分。

2.1.1、testgui.ui的绘制

第一步：双击testgui.ui，进入qt designer界面，当然了，这样是保证你已经配置好qt designer的情况下，具体配置方案参考网上都有，还有opencv同样的需要配置

第二步：在这里我们加入了三个Push Button的按钮，分别表示开始，处理，和结束，objectName命名为Push_start.(针对开始按钮来说的，别的两个类似，不赘述)

第三步：创建两个Label，以后分别用于显示图像部分，objectName命名为pic_1和pic_2

创建好的截图，如下图所示：

现在切换到这种状态下，先不管这是叫什么按钮，先看标记部分，点它进行切换

这种状态下，鼠标放在开始按钮上，按住左键拖动，引出槽函数（需要什么，自己编辑添加）

做完上面的内容之后，需要对象查看器，显示了我们界面中各个组件的属性，如下图：

这时，我们此次用到的几个按钮和函数部分。还有引出来的几个槽函数（具体草槽数是个啥，建议好好学习下QT的机制，比较好理解）。如下图：

2.1.2、给UI赋予功能

先写开始按钮

功能：点击开始按钮，摄像头开始启动采集图像

在开始之前呢，首先需要在testgui.h上定义一些点击开始按钮需要的一个量和函数，如下图勾画出来的部分

还有头文件

其中：

#include <QTimer>        用于时间循环采集帧图像

QImage show_image1; 定义显示图像

以下类似了，就不那么啰嗦了，看一下理解一下，谨记定义槽函数部分

下面直接贴出代码testgui.cpp的【开始】按钮部分代码（不着急，最后会把所有代码上传的）

void testgui::flag1()
{
	flag_1 = !flag_1;
}
VideoCapture capture1(0);

void testgui::start()
{
	if (flag_1 == 1)//flag函数
	{
		capture1 >> image1;
		cvtColor(image1, image1, CV_BGR2RGB);
		show_image1 = QImage((const unsigned char*)image1.data, image1.cols, image1.rows, image1.cols*image1.channels(), QImage::Format_RGB888);
		//namedWindow("1");
		//imshow("1", image1);
		ui.pic_1->setPixmap(QPixmap::fromImage(show_image1)); //pic--显示图片窗
	}
}

其中，flag_1用于触发按钮，以后的其他按钮也类似

处理部分代码，与开始做对比吧。这里只是灰度化变换，其他的图像处理操作，类似于canny等等都可以添加进来显示。图像处理部分代码如下：

void testgui::flag2()
{
	flag_2 = !flag_2;
}

void testgui::process()
{
	if (flag_2 == 1)
	{
		Mat temp;
		Mat gray;
		cvtColor(image1, temp, CV_BGR2RGB);
		cvtColor(temp, gray, CV_RGB2GRAY);

		Mat midImage;
		Canny(gray, midImage, 50, 200, 3);
		Mat detImage;
		cvtColor(midImage, detImage, CV_GRAY2BGR);

		QImage iGray((const unsigned char*)(gray.data), gray.cols, gray.rows, QImage::Format_Indexed8);
		ui.pic_2->setPixmap(QPixmap::fromImage(iGray));
	}
}

到这里基本就把所有需要将的都描述清楚了，具体的细节直接看代码理解了，完整代码也会分享到CSDN上，详情下载。最后看下静态效果截图：

点击”开始“进行摄像头采集图像了。这是动态的，是摄像头采集的，所以在开始这个采集之前呢，需要确保你的电脑可以打开摄像头，进行显示。如下显示这样：

再点击“处理”，就显示灰度化后的图像了，如下图右侧这样：

OK，到此就可以做最基本的显示了，后期会对这个文档做修改，谢谢。需要完整代码段的，手动点击这里下载，免费的，记得点赞关注哦

点击打开链接http://download.csdn.net/detail/wsljqian/9820226

3、总结

我现在还记得第一次使用QT，仿佛打开了一扇崭新的大门。因为在接触QT之前，我一直在找一个好用的，编写GUI界面的工具。

由于早期使用Matlab比较多，就尝试用MFC进行编写，发现贼复杂，简单的任务还行，稍微复杂一些就很麻烦。后面还又PyQt，也可以多多尝试下。

相信你经过这个简单的案例的实践，对于你自己的项目会有一些启发。万事开头难，只要开了头，就顺畅很多了。加油