PyQt5入门3——添加一个按钮并且读取特定的图片

学习前言

搞搞可视化界面哈，虽然不一定有用，但是搞一下。

使用到的PyQt5类

创建画布需要使用到QPushButton。QPushButton是QT界面中的按钮类，它从QAbstractButton下继承。

使用前需要从QtWidgets导入进来：

from PyQt5.QtWidgets import QApplication, QTextBrowser, QWidget, QLabel, QPushButton

使用如下指令可以创建QLabel，第一个传入参数是其显示的文字。

self.btn_photo = QPushButton('获取图片', self)

QLabel具有多个方法，比较常用的有以下几种：

1、.setText方法用于设置文字：

self.btn_photo.setText('获取图片')

2、.setToolTip方法设置鼠标放在上面时的提示：

self.btn_photo.setToolTip('点击后从电脑中读取图片')

3、.move方法用于移动窗口：

self.btn_photo.move(10, 50)

4、.setIcon设置图标，在这中间需要使用到QIcon类，QIcon加上路径就可以读取图片成为图标，.setIconSize用于设置图标大小：

self.btn_photo.setIcon("QLabel{background:white;}")
self.btn_photo.setIconSize(QSize(50, 50))

5、.clicked.connect设置点击后的触发函数：

self.btn_photo.clicked.connect(self.openimage)

6、.setObjectName设置组件名称：

self.label_show_camera.setObjectName("image_show")

实例使用

1、窗口构建

a、构建基础类

首先绘制一个按钮在上一步构建的Example中。

#-----------------------------#
#   获取图片按钮
#-----------------------------#
self.btn_photo = QPushButton('获取图片', self)
self.btn_photo.setToolTip('点击后从电脑中读取图片')
self.btn_photo.setIcon(QIcon("img/icon/Search.jpeg"))
self.btn_photo.setIconSize(QSize(50, 50))
self.btn_photo.resize(130, 60)
self.btn_photo.move(330, 50)   
self.btn_photo.clicked.connect(self.openimage)

b、openimage触发函数-读取已有的图片并且显示

总的步骤如下：

• 准备一个图片，把图片的名字设置为photo.jpg，和py文件放一个文件夹：
  
• 使用PIL或者cv2读取图片，这里我们使用PIL。
• 由于上面我们规定了QLabel的大小，我们需要对图片进行resize。

#-----------------------------#
#   打开图片模式
#-----------------------------#
@pyqtSlot()
def openimage(self):
    imgName, _ = QFileDialog.getOpenFileName(self, "打开图片", "", "Images (*.jpg, *.png);;All Files(*)")
    if len(imgName)==0:
        return
    show        = Image.open(imgName).convert("RGB")
    show        = show.resize([self.label_w, self.label_h])

    showImage   = QImage(np.array(show), np.shape(show)[1],  np.shape(show)[0], QImage.Format_RGB888)
    self.label_show_camera.setPixmap(QPixmap.fromImage(showImage))

2、主程序运行

这个是调用上述创建的Example，细节不必纠结，只需要知道这样便可以调用PyQt5即可。

if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())

全部代码

import sys
import numpy as np
from PIL import Image

from PyQt5.QtGui import QImage, QPixmap, QIcon
from PyQt5.QtCore import pyqtSlot, QSize
from PyQt5.QtWidgets import QApplication, QTextBrowser, QWidget, QLabel, QPushButton, QFileDialog


class Example(QWidget):
    def __init__(self):
        QWidget.__init__(self)
    
        #-----------------------------#
        #   界面显示相关内容
        #-----------------------------#
        self.initUI()

    def initUI(self):
        #-----------------------------#
        #   初始化标题，界面大小
        #-----------------------------#
        self.resize(640, 480)
        self.setWindowTitle('Hello World!')

        #-----------------------------#
        #   写一段话
        #   放到10,10
        #   拉伸长度为620,200
        #-----------------------------#
        self.text_browser = QTextBrowser(self)
        self.text_browser.move(10, 10)
        self.text_browser.resize(620, 30)
        self.text_browser.setText("The Hello World Before!")

        #-----------------------------#
        #   设置显示的图片
        #-----------------------------#
        self.label_h = 300
        self.label_w = 300
        self.label_show_camera = QLabel(self)
        self.label_show_camera.move(10, 50)
        self.label_show_camera.setFixedSize(self.label_w, self.label_h)
        self.label_show_camera.setText("The Hello World Before!")
        self.label_show_camera.setStyleSheet("QLabel{background:white;}")
        self.label_show_camera.setObjectName("image_show")

        #-----------------------------#
        #   获取图片按钮
        #-----------------------------#
        self.btn_photo = QPushButton('获取图片', self)
        self.btn_photo.setToolTip('点击后从电脑中读取图片')
        self.btn_photo.setIcon(QIcon("img/icon/Search.jpeg"))
        self.btn_photo.setIconSize(QSize(50, 50))
        self.btn_photo.resize(130, 60)
        self.btn_photo.move(330, 50)   
        self.btn_photo.clicked.connect(self.openimage)

        self.show()

    #-----------------------------#
    #   打开图片模式
    #-----------------------------#
    @pyqtSlot()
    def openimage(self):
        imgName, _ = QFileDialog.getOpenFileName(self, "打开图片", "", "*.jpg;;*.png;;All Files(*)")
        if len(imgName)==0:
            return
        show        = Image.open(imgName).convert("RGB")
        show        = show.resize([self.label_w, self.label_h])

        showImage   = QImage(np.array(show), np.shape(show)[1],  np.shape(show)[0], QImage.Format_RGB888)
        self.label_show_camera.setPixmap(QPixmap.fromImage(showImage))
        
if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())