Preface to study

Come up with a visual interface, although it may not be useful, but give it a try.
Insert image description here

PyQt5 classes used

Creating a canvas requires the use of QLabel. QLabel is the label class in the QT interface. It inherits from QFrame. The QLabel class represents a label. It is a widget used to display text or images.

You need to import it from QtWidgets before use:

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

QLabel can be created using the following instructions.

self.label_show_camera = QLabel(self)

QLabel has multiple methods, the more commonly used ones are the following:

1. .moveMethod for moving windows:

self.label_show_camera.move(10, 50)

2. .setFixedSizeSet the window size:

self.label_show_camera.setFixedSize(610, 300)

3. .setTextQuestions in the settings window:

self.label_show_camera.setText("TextLabel")

4. .setStyleSheetSet the initial window color:

self.label_show_camera.setStyleSheet("QLabel{background:white;}")

5. .setPixmapSet the picture:

self.label_show_camera.setPixmap(QPixmap.fromImage(showImage))

Before setting the picture, you need to prepare the picture that needs to be placed. We can use the QImage class to obtain the picture that needs to be placed.

showImage = QImage(np.array(show), np.shape(show)[1],  np.shape(show)[0], QImage.Format_RGB888)

6. .clearClear cache:

self.label_show_camera.clear()

7. .setObjectNameSet the component name:

self.label_show_camera.setObjectName("image_show")

Example usage

1. Window construction

a. Build basic classes

First draw a canvas in the Example built in the previous step.

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("TextLabel")
self.label_show_camera.setStyleSheet("QLabel{background:white;}")
self.label_show_camera.setObjectName("image_show")

b. Read existing pictures and display them

The overall steps are as follows:

Prepare a picture, set the name of the picture to photo.jpg, and put it in a folder with the py file:
Use PIL or cv2 to read images. Here we use PIL.
Since we specified the size of QLabel above, we need to resize the image.

show        = Image.open("photo.png").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. Main program operation

This is to call the Example created above. Don't worry about the details. You just need to know that you can call PyQt5.

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

All code

import sys
import numpy as np
from PIL import Image

from PyQt5.QtGui import QImage, QPixmap
from PyQt5.QtWidgets import QApplication, QTextBrowser, QWidget, QLabel


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("TextLabel")
        self.label_show_camera.setStyleSheet("QLabel{background:white;}")
        self.label_show_camera.setObjectName("image_show")
        
        show        = Image.open("photo.png").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))

        self.show()

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

Getting Started with PyQt5 2 - Add a canvas and display a specific image