Qt中使用ui设计界面实现显示opencv图片（label+button）

本例以windows下的qt演示操作过程，再移植到虚拟机下运行

创建工程

环境配置

在pro文件中添加opencv库：LIBS和INCLUDEPATH
在weight.h中加:
#include
#include //文件对话框
using namespace cv;

ui设计

接下来就使用设计器直接进行设计啦

按钮

点击weight.ui

假设我们现在需要一个按钮，我们直接从左侧拖入我们设计大小的画面中

在右侧可以对按钮的详细样式进行设计
我们肯定要给按钮添加槽函数，我们只要对着按钮右击——转到槽

使用最简单的单击就发信号，按OK之后qt就会自动帮我们创建好槽函数啦

显示图片（label）

opencv的画面（图片）我们使用label绘制进行显示在qt界面中
一样地操作，先从左边拉出来一个label

我们直接在右侧对label的属性进行设置，为了显示opencv的画面，我们先把这一块label设置为白底
然后选择白色，点ok即可

当然StyleSheet还有很多其他的样式设计，一样在这里选择哈
同时，既然要拿来显示画面，那么就把字去掉：

业务实现

那么我们怎么将图片显示在画面中呢？也就是我们要去写之前自动生成的槽函数，下面直接po出代码，详细的解释都在注释中了：

代码业务是：
按下按钮，选择一张jpg图片打开，把图片显示在label选定的位置中

void Widget::on_pushButton_clicked()
{
    //点击按钮，打开文件选择，选择要播放的视频
    QString fileName=QFileDialog::getOpenFileName(this,//1、parent，用于指定父组件
                                                  tr("open Image"),//2、caption，是对话框的标题
                                                  ".",//3、dir，是对话框显示时默认打开的目录，"." 代表程序运行目录
                                                  tr("Image File(*.jpg)"));
    //4、filter，是对话框的后缀名过滤器，比如我们使用"Image Files(*.jpg *.png)"就让它只能显示后缀名是jpg或者png的文件。
    //4、如果需要使用多个过滤器，使用";;"分割，比如"JPEG Files(*.jpg);;PNG Files(*.png)"；
    if(fileName.isEmpty())
    {
        return;
    }

    //toLatin1转QString到QByteArray，data转QByteArray到char*(可f1查看)
    Mat srcImage=imread(fileName.toLatin1().data());

    //qt中对图像的颜色格式存储是RGB格式，而opencv中是BG格式
    //要想显示，我们要把BGR转RGB
    cv::cvtColor(srcImage,srcImage,COLOR_BGR2RGB);

    //QT中图片是使用QImage对，而opencv中Mat对象是图片，其中真正数据是存放在Mat的data属性,所以要转化srcImage为disImage
    //用QImage第四个重载方法
    QImage disImage=QImage((const unsigned char*)srcImage.data,
                           srcImage.cols,srcImage.rows,QImage::Format_RGB888);//888是三通道

    //转化好了格式，怎么把QImage和QLabel结合，QLabel显示QImage？
    //ui是访问我们设计工具设计的元素，在设计器左上角可以看到编号
    ui->label->setPixmap(QPixmap::fromImage(disImage.scaled(ui->label->size(),//使得图片匹配为label的大小
                                                            Qt::KeepAspectRatio//使得图片保存高宽比
                                                            )));


}

显示效果如下：