【Qt_OpenCV基础篇 - 002】Qt中使用OpenCV处理并显示图片程序框架（QMainWindow）

一、开发环境

1、Windows 7 64位 SP1 旗舰版；

2、Qt 5.10.1；

3、OpenCV 3.4.1

二、设计要点

      基于Qt开发环境，使用OpenCV打开并显示图像的功能已经在上一个微博中给出示例代码（【Qt_OpenCV基础篇 - 001】Qt 5.10.1下配置OpenCV开发环境及Demo），该示例采用的是OpenCV自带的imshow函数来实现图片的显示，而在实际的基于Qt的项目开发中，我们并不希望用单独的OpenCV窗口来显示图片，而是嵌入到Qt界面中。当然，显示只是为了更好更直观的看到程序算法运行的效果，实际图像处理过程中包含许多中间过程，中间过程是否需要显示需要根据项目实际需要来决定。

      OpenCV3.0以后，图像采用Mat格式进行存储，Qt中图像存储采用的是QImage类，因此，如果需要再Qt中显示OpenCV处理过程中的图像，需要将Mat类对象表示的图像转换为QImage类对象表示的图像。同时，由Mat格式采用BGR的存储顺序，而QImage格式采用的是RGB存储顺序，因此，转换过程分为两步：

      1）存储格式转换：BGR --> RGB；

      2）类型转换：Mat类 ---> QImage;

      完成QImage类对象转换后，在Qt界面中显示QImage类对象，可以采用QLabel或者QGraphicsView，两种方法分别如下面的示例所示。

三、图片显示Demo

1、创建基于QMainWindow的Qt项目，按照《【Qt_OpenCV基础篇 - 001】Qt 5.10.1下配置OpenCV开发环境及Demo》给定的方法配置OpenCV开发环境；

2、设计界面如下：

图1 界面设计

3、编写代码，其中mainwindow.h和mainwindow.cpp文件内容分别如下：

1）mainwindow.h头文件内容：

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

#include "opencv2/opencv.hpp"//OpenCV文件包含
using namespace cv;          //OpenCV命名空间

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private slots:
    void on_pushButton_clicked();
    void on_pushButton_2_clicked();

private:
    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

2）mainwindow.cpp文件内容：

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QFileDialog>

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
}

MainWindow::~MainWindow()
{
    delete ui;
}

/*
 * 使用QLabel显示图像
*/
void MainWindow::on_pushButton_clicked()
{
    QString fileName = QFileDialog::getOpenFileName(this,tr("Open Image"),".",tr("Image File(*.png *.jpg *.jpeg *.bmp)"));
    if (fileName.isEmpty())
    {
        return;
    }

    ui->stackedWidget->setCurrentIndex(0);

    Mat srcImage = imread(fileName.toLatin1().data());//读取图片数据
    cvtColor(srcImage, srcImage, COLOR_BGR2RGB);//图像格式转换
    QImage disImage = QImage((const unsigned char*)(srcImage.data),srcImage.cols,srcImage.rows,QImage::Format_RGB888);
    ui->label->setPixmap(QPixmap::fromImage(disImage.scaled(ui->label->size(), Qt::KeepAspectRatio)));//显示图像
}

/*
 * 使用QGraphicsView显示图像
*/
void MainWindow::on_pushButton_2_clicked()
{
    QString fileName = QFileDialog::getOpenFileName(this,tr("Open Image"),".",tr("Image File(*.png *.jpg *.jpeg *.bmp)"));
    if (fileName.isEmpty())
    {
        return;
    }

    ui->stackedWidget->setCurrentIndex(1);

    Mat srcImage = imread(fileName.toLatin1().data());//读取图片数据
    cvtColor(srcImage, srcImage, COLOR_BGR2RGB);//图像格式转换
    QImage disImage = QImage((const unsigned char*)(srcImage.data),srcImage.cols,srcImage.rows,QImage::Format_RGB888);

    QGraphicsScene *scene = new QGraphicsScene;//图像显示
    scene->addPixmap(QPixmap::fromImage(disImage));
    ui->graphicsView->setScene(scene);
    ui->graphicsView->show();
}

4、构建运行并测试，结果如图2和图3所示。

图2 QLabel显示图像

图3 QGraphicsView显示图像