PyQt5学习笔记--基于Qt Designer和Opencv生成灰度图GUI

目录

1--基于Qt Designer设计ui文件

2--源代码

3--结果展示

4--补充

5--参考

---

1--基于Qt Designer设计ui文件

2--源代码

import sys
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5 import uic
import cv2

class MyWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.init_ui()

    def init_ui(self):
        self.ui = uic.loadUi("./Qlabel.ui")  # 加载由Qt Designer设计的ui文件
        self.Qlabel1 = self.ui.label # 加载Qlabel属性
        self.img_btn1 = self.ui.pushButton # 加载pushButton属性
        self.Qlabel2 = self.ui.label_2
        self.img_btn2 = self.ui.pushButton_2

        # img_btn1 绑定槽函数 loadImage()
        self.img_btn1.clicked.connect(self.loadImage)

        # img_btn2 绑定槽函数 gen_gray()
        self.img_btn2.clicked.connect(self.gen_gray)

    def loadImage(self):  # 选择label展示的图片
        # 弹窗导入图片文件
        self.file_name, _ = QFileDialog.getOpenFileName(self.ui, '打开文件', '.', '图像文件(*.jpg *.png)')

        self.Qlabel1.setScaledContents(True)  # 让图片自适应 label 大小
        self.Qlabel1.setPixmap(QPixmap(self.file_name)) # label 显示图片


    def gen_gray(self):
        img = cv2.imread(self.file_name)  # opencv读取图片
        gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)  # BGR转换为灰度图

        # data, w, h, format
        frame = QImage(gray.data, gray.shape[1], gray.shape[0], gray.strides[0], QImage.Format_Indexed8)
        self.Qlabel2.setScaledContents(True)  # 让图片自适应 label 大小
        self.Qlabel2.setPixmap(QPixmap(frame))  # label 显示图片

if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = MyWindow()
    w.ui.show()
    app.exec_()

3--结果展示

① 运行程序：

② 导入图片：

③ 生成灰度图：

4--补充

①上述代码使用Qlabel显示图片，可能存在不方便之处，下面展示用QGraphicsView显示图片的修改代码：

import sys
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5 import uic
import cv2

class MyWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.init_ui()

    def init_ui(self):
        self.ui = uic.loadUi("./QGraphicsView.ui")  # 加载由Qt Designer设计的ui文件
        self.QGraphView1 = self.ui.graphicsView # 加载graphicsView属性
        self.img_btn1 = self.ui.pushButton  # 加载pushButton属性
        self.QGraphView2 = self.ui.graphicsView_2
        self.img_btn2 = self.ui.pushButton_2

        # img_btn1 绑定槽函数 loadImage()
        self.img_btn1.clicked.connect(self.loadImage)

        # img_btn2 绑定槽函数 gen_gray()
        self.img_btn2.clicked.connect(self.gen_gray)

    def loadImage(self):  # 选择label展示的图片
        # 弹窗导入图片文件
        self.file_name, _ = QFileDialog.getOpenFileName(self.ui, '打开文件', '.', '图像文件(*.jpg *.png)')

        pix = QPixmap(self.file_name)
        item = QGraphicsPixmapItem(pix)  # 创建像素图元
        scene = QGraphicsScene()  # 创建场景
        scene.addItem(item)
        self.QGraphView1.setScene(scene)  # 将场景添加至视图

        self.QGraphView1.fitInView(item) # 自适应大小

    def gen_gray(self):
        img = cv2.imread(self.file_name)  # opencv读取图片
        gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)  # BGR转换为灰度图

        # data, w, h, format
        frame = QImage(gray.data, gray.shape[1], gray.shape[0], gray.strides[0], QImage.Format_Indexed8)
        pix = QPixmap.fromImage(frame)
        item = QGraphicsPixmapItem(pix)  # 创建像素图元
        scene = QGraphicsScene()  # 创建场景
        scene.addItem(item)
        self.QGraphView2.setScene(scene)  # 将场景添加至视图

        self.QGraphView2.fitInView(item)  # 自适应大小

if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = MyWindow()
    w.ui.show()
    app.exec_()

② 结果展示：

5--参考

pyqt5-qimage与opencv互转

pyqt显示图片的两种方法