【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、设计界面如下:

【Qt_OpenCV基础篇 - 002】Qt中使用OpenCV处理并显示图片程序框架(QMainWindow)_第1张图片

【Qt_OpenCV基础篇 - 002】Qt中使用OpenCV处理并显示图片程序框架(QMainWindow)_第2张图片

图1 界面设计

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

1)mainwindow.h头文件内容:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include 

#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 

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所示。

【Qt_OpenCV基础篇 - 002】Qt中使用OpenCV处理并显示图片程序框架(QMainWindow)_第3张图片

图2 QLabel显示图像

【Qt_OpenCV基础篇 - 002】Qt中使用OpenCV处理并显示图片程序框架(QMainWindow)_第4张图片

图3 QGraphicsView显示图像


你可能感兴趣的:(Qt_OpenCV基础篇,【Qt-OpenCV基础篇】)