PyQt5图像显示类选择及QGraphicsView展示cv2数组图像问题

嘿，我懂你卡在这里好久的感觉！刚好我之前做过类似的需求，来给你一步步讲清楚怎么解决～

先说说PyQt5里适合显示图像的类 #

• QLabel：最轻量化的选择，适合静态显示图像，代码简单，但如果需要缩放、点击交互这类功能，得额外做不少处理。
• QGraphicsView：更强大的组件，基于场景（QGraphicsScene）-视图架构，天生支持缩放、平移，非常适合你需要点击获取坐标的场景，这也是我重点推荐的方案。

重点：用QGraphicsView显示cv2的numpy数组图像并实现点击取坐标 #

步骤1：把cv2图像转换成Qt能识别的格式 #

cv2默认输出的是BGR格式的numpy数组，而Qt的图像格式是RGB，所以第一步要做格式转换，写个工具函数就行：

def cv2_to_qimage(cv_img):
    # 把cv2的BGR转成RGB
    rgb_img = cv2.cvtColor(cv_img, cv2.COLOR_BGR2RGB)
    # 获取图像的宽、高、通道数
    h, w, ch = rgb_img.shape
    # 计算每行的字节数，确保QImage能正确解析数据
    bytes_per_line = ch * w
    # 生成QImage对象
    q_img = QtGui.QImage(rgb_img.data, w, h, bytes_per_line, QtGui.QImage.Format_RGB888)
    return q_img

步骤2：在QGraphicsView中显示图像 #

假设你已经用Qt Designer生成了UI，里面有一个名为graphicsView的QGraphicsView控件，接下来把图像加载进去：

from PyQt5 import QtWidgets, QtGui, QtCore
import cv2
import numpy as np

class MyMainWindow(QtWidgets.QMainWindow):
    def __init__(self, ui):
        super().__init__()
        self.ui = ui
        self.ui.setupUi(self)
        
        # 初始化图形场景，QGraphicsView需要搭配QGraphicsScene使用
        self.scene = QtWidgets.QGraphicsScene()
        self.ui.graphicsView.setScene(self.scene)
        # 开启拖拽平移和锚点缩放，提升交互体验
        self.ui.graphicsView.setDragMode(QtWidgets.QGraphicsView.ScrollHandDrag)
        self.ui.graphicsView.setTransformationAnchor(QtWidgets.QGraphicsView.AnchorUnderMouse)
        
        # 用来存储用户点击的坐标
        self.clicked_coords = []
        
        # 加载你的cv2图像（可以是numpy数组，比如从摄像头读取的帧）
        self.cv_image = cv2.imread("your_image.jpg")  # 替换成你的图像源
        # 显示图像
        self.show_cv_image(self.cv_image)
        
        # 给QGraphicsView安装事件过滤器，用来捕获点击事件
        self.ui.graphicsView.installEventFilter(self)
    
    def show_cv_image(self, cv_img):
        # 清空场景里的旧内容
        self.scene.clear()
        # 转成QImage再转成QPixmap
        q_img = cv2_to_qimage(cv_img)
        pixmap = QtGui.QPixmap.fromImage(q_img)
        # 把pixmap添加到场景中
        self.pixmap_item = self.scene.addPixmap(pixmap)
        # 让视图自动适配图像大小，保持比例
        self.ui.graphicsView.fitInView(self.pixmap_item, QtCore.Qt.KeepAspectRatio)
    
    def eventFilter(self, obj, event):
        # 只处理graphicsView的鼠标左键点击事件
        if obj == self.ui.graphicsView and event.type() == QtCore.QEvent.MouseButtonPress:
            if event.button() == QtCore.Qt.LeftButton:
                # 把视图的点击位置转换成场景坐标（场景坐标和图像原始像素坐标对应）
                scene_pos = self.ui.graphicsView.mapToScene(event.pos())
                # 检查点击的位置是否在图像上
                if self.pixmap_item.contains(scene_pos):
                    # 转换成整数像素坐标
                    img_x = int(scene_pos.x())
                    img_y = int(scene_pos.y())
                    # 确保坐标在图像范围内
                    if 0 <= img_x < self.cv_image.shape[1] and 0 <= img_y < self.cv_image.shape[0]:
                        self.clicked_coords.append((img_x, img_y))
                        print(f"已记录坐标：({img_x}, {img_y})")
            return True
        # 其他事件交给父类处理
        return super().eventFilter(obj, event)

步骤3：启动程序的代码 #

假设你的Qt Designer生成的UI文件是mainwindow_ui.py，启动代码如下：

from mainwindow_ui import Ui_MainWindow

if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    ui = Ui_MainWindow()
    window = MyMainWindow(ui)
    window.show()
    sys.exit(app.exec_())

补充：如果用QLabel显示的简单方案 #

如果你不需要复杂的缩放平移，QLabel足够用，显示代码更简单，点击取坐标的话需要处理缩放比例：

def show_cv_image_in_label(cv_img, label):
    q_img = cv2_to_qimage(cv_img)
    pixmap = QtGui.QPixmap.fromImage(q_img)
    # 让图像自适应label大小，保持比例
    scaled_pixmap = pixmap.scaled(label.size(), QtCore.Qt.KeepAspectRatio)
    label.setPixmap(scaled_pixmap)
    # 存储原始图像大小和缩放后的大小，用来转换坐标
    label.original_size = (cv_img.shape[1], cv_img.shape[0])
    label.scaled_size = (scaled_pixmap.width(), scaled_pixmap.height())

# 然后在事件过滤器里处理点击：
def eventFilter(self, obj, event):
    if isinstance(obj, QtWidgets.QLabel) and event.type() == QtCore.QEvent.MouseButtonPress:
        if obj.pixmap() is not None:
            # 计算缩放比例
            scale_x = obj.original_size[0] / obj.scaled_size[0]
            scale_y = obj.original_size[1] / obj.scaled_size[1]
            # 转换为原始图像坐标
            img_x = int(event.x() * scale_x)
            img_y = int(event.y() * scale_y)
            print(f"点击坐标：({img_x}, {img_y})")
        return True
    return super().eventFilter(obj, event)

总结 #

• 如果你需要点击取坐标、缩放平移这类交互，优先选QGraphicsView，它的场景-视图架构能帮你省很多事；
• 只是静态显示图像的话，QLabel更简单轻便。

内容的提问来源于stack exchange，提问作者TheStrangeQuark