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

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

功能：如题，GUI图像采集及处理UI交互界面，点击采图和处理，在这里只做灰度化

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

 

 

//下面开始//

 

新建项目->模块,命名testgui

 

 

一直下一步，直到完成             

开始编写我们真个程序段部分               ///重点

 

主函数就这个样子，系统自己创建的，不用改，就这样

 

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

下面就是testgui.ui的绘制

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

 

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

 

两个Label,以后分别用于显示图像部分，objectName命名为pic_1和pic_2

 

如下图

 

 

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

 

 

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

 

对象查看器

 

这事我们此次用到的几个按钮和函数部分

还有印出来的几个槽函数

如图

 

下面就是对真个UI部分来进行编码连接他们之间的关系

1.先写开始按钮

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

首先需要在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--显示图片窗
	}
}

flag1用于出发按钮，以后类似

 

 

【处理】部分代码，与开始做对比吧

[这里只是灰度化变换【做了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，到此就可以做最基本的显示了，后期会对这个文档做修改，谢谢

需要完整代码段的，手动下载

 

点击打开链接（完整运行程序代码）

想get更多有趣知识？请加微信公众号“小白算法”，谢谢