Image Color Space With OpenCV and PyQt

In this tutorial, you will learn how to use OpenCV module and to display the resulting image with PyQt.

Follow these steps below:

1. Open Qt Designer. Put two Label widgets dan two Push Button widgets onto form.
2. Set objectName property of the two Label widgets by name labelImage and labelGray.
3. Set objectName property of the two Push Button widgets by name pbOriginalImage and pbGrayImage.
4. Name form as read_image.ui.
5. Form now looks as follows:



6. Write this script and name it as read_image.py:



import sys
import cv2
from PyQt5.QtWidgets import QApplication, QWidget, QLabel
from PyQt5.QtWidgets import QDialog, QFileDialog
from PyQt5.QtGui import QIcon, QPixmap, QImage
from PyQt5.uic import loadUi

fname = ""
    
class FormImage(QDialog):

    def __init__(self):
        QDialog.__init__(self)
        loadUi("read_image.ui",self)

        self.setWindowTitle("Reading Image")
        self.pbOriginalImage.clicked.connect(self.display_image)
        self.pbGrayImage.clicked.connect(self.convert_to_gray)

    def display_image(self):
        global fname
        fname = QFileDialog.getOpenFileName(self, 'Open file', 
           'd:\\',"Image Files (*.jpg *.gif *.bmp *.png)")
        pixmap = QPixmap(fname[0])
        self.labelImage.setPixmap(pixmap)
        self.labelImage.setScaledContents(True);

    def convert_to_gray(self):
        gray_img = cv2.imread(fname[0], cv2.IMREAD_GRAYSCALE)
        height, width = gray_img.shape[:2]

        img = QImage(gray_img, width, height, QImage.Format_Grayscale8)
        pixmap = QPixmap.fromImage(img)
        self.labelGray.setPixmap(pixmap)
        self.labelGray.setScaledContents(True);
        
if __name__=="__main__":
    app = QApplication(sys.argv)    
    w = FormImage()
    w.show()
    sys.exit(app.exec_())



7. Run the program. Click on Read Image button and then click on Convert To Gray button. You will see the image with its grayscale version:





8. Modify read_image.ui form and add one Label widget dan another Push Button widget. You will add functionality to convert original image into YUV color space:





9. Modify read_image.py as follows:



import sys
import cv2
from PyQt5.QtWidgets import QApplication, QWidget, QLabel
from PyQt5.QtWidgets import QDialog, QFileDialog
from PyQt5.QtGui import QIcon, QPixmap, QImage
from PyQt5.uic import loadUi

fname = ""
    
class FormImage(QDialog):

    def __init__(self):
        QDialog.__init__(self)
        loadUi("read_image.ui",self)

        self.setWindowTitle("Reading Image")
        self.pbOriginalImage.clicked.connect(self.display_image)
        self.pbGrayImage.clicked.connect(self.convert_to_gray)
        self.pbYUVImage.clicked.connect(self.convert_to_yuv)

    def display_image(self):
        global fname
        fname = QFileDialog.getOpenFileName(self, 'Open file', 
           'd:\\',"Image Files (*.jpg *.gif *.bmp *.png)")
        pixmap = QPixmap(fname[0])
        self.labelImage.setPixmap(pixmap)
        self.labelImage.setScaledContents(True);

    def convert_to_gray(self):
        gray_img = cv2.imread(fname[0], cv2.IMREAD_GRAYSCALE)
        height, width = gray_img.shape[:2]

        img = QImage(gray_img, width, height, QImage.Format_Grayscale8)
        pixmap = QPixmap.fromImage(img)
        self.labelGray.setPixmap(pixmap)
        self.labelGray.setScaledContents(True);
        
    def convert_to_yuv(self):
        read_img = cv2.imread(fname[0])
        yuv_img = cv2.cvtColor(read_img, cv2.COLOR_BGR2YUV)
        height, width, channel = yuv_img.shape
        bytesPerLine = 3 * width
        qImg = QImage(yuv_img.data, width, height, bytesPerLine, QImage.Format_RGB888)
        pixmap = QPixmap.fromImage(qImg)
        self.labelYUV.setPixmap(pixmap)
        self.labelYUV.setScaledContents(True);
        
if __name__=="__main__":
    app = QApplication(sys.argv)    
    w = FormImage()
    w.show()
    sys.exit(app.exec_())



10. Run again the program. Click on Read Image button, then click on Convert To Gray button to see the image with its grayscale version, and then click on Convert To YUV button to see YUV color space of original image:





11. Finally, add three mode Label widgets and another Push Button widget. In this case, you will extract and display each channel of HSV color space. Modify read_image.py as follows:



import sys
import cv2
from PyQt5.QtWidgets import QApplication, QWidget, QLabel
from PyQt5.QtWidgets import QDialog, QFileDialog
from PyQt5.QtGui import QIcon, QPixmap, QImage
from PyQt5.uic import loadUi

fname = ""
    
class FormImage(QDialog):

    def __init__(self):
        QDialog.__init__(self)
        loadUi("read_image.ui",self)

        self.setWindowTitle("Reading Image")
        self.pbOriginalImage.clicked.connect(self.display_image)
        self.pbGrayImage.clicked.connect(self.convert_to_gray) 
        self.pbYUVImage.clicked.connect(self.convert_to_yuv)
        self.pbHSVImage.clicked.connect(self.extract_hsv)

    def display_image(self):
        global fname
        fname = QFileDialog.getOpenFileName(self, 'Open file', 
           'd:\\',"Image Files (*.jpg *.gif *.bmp *.png *.tiff)")
        pixmap = QPixmap(fname[0])
        self.labelImage.setPixmap(pixmap)
        self.labelImage.setScaledContents(True);

    def convert_to_gray(self):
        gray_img = cv2.imread(fname[0], cv2.IMREAD_GRAYSCALE)
        height, width = gray_img.shape[:2]

        img = QImage(gray_img, width, height, QImage.Format_Grayscale8)
        pixmap = QPixmap.fromImage(img)
        self.labelGray.setPixmap(pixmap)
        self.labelGray.setScaledContents(True);
        
    def convert_to_yuv(self):
        read_img = cv2.imread(fname[0])
        yuv_img = cv2.cvtColor(read_img, cv2.COLOR_BGR2YUV)
        height, width, channel = yuv_img.shape
        bytesPerLine = 3 * width
        qImg = QImage(yuv_img.data, width, height, bytesPerLine, QImage.Format_RGB888)
        pixmap = QPixmap.fromImage(qImg)
        self.labelYUV.setPixmap(pixmap)
        self.labelYUV.setScaledContents(True);
    
    def extract_hsv(self):
        read_img = cv2.imread(fname[0])
        hsv_img = cv2.cvtColor(read_img, cv2.COLOR_BGR2HSV)
        
        #H Channel
        h = hsv_img[:, :, 0]
        h = cv2.cvtColor(h, cv2.COLOR_GRAY2BGR)
        height, width, channel = h.shape
        bytesPerLine = 3 * width
        img = QImage(h, width, height, bytesPerLine, QImage.Format_RGB888)
        pixmap = QPixmap.fromImage(img)
        self.labelH.setPixmap(pixmap)
        self.labelH.setScaledContents(True);
        
        #S Channel
        s = hsv_img[:, :, 1]
        s = cv2.cvtColor(s, cv2.COLOR_GRAY2BGR)
        height, width, channel = s.shape
        bytesPerLine = 3 * width
        img = QImage(s, width, height, bytesPerLine, QImage.Format_RGB888)
        pixmap = QPixmap.fromImage(img)
        self.labelS.setPixmap(pixmap)
        self.labelS.setScaledContents(True);
        
        #V Channel
        v = hsv_img[:, :, 2]
        v = cv2.cvtColor(v, cv2.COLOR_GRAY2BGR)
        height, width, channel = v.shape
        bytesPerLine = 3 * width
        img = QImage(v, width, height, bytesPerLine, QImage.Format_RGB888)
        pixmap = QPixmap.fromImage(img)
        self.labelV.setPixmap(pixmap)
        self.labelV.setScaledContents(True);

        
if __name__=="__main__":
    app = QApplication(sys.argv)    
    w = FormImage()
    w.show()
    sys.exit(app.exec_())



12. Run again the program. Click on Read Image button, then click on Convert To Gray button to see the image with its grayscale version, then click on Convert To YUV button to see YUV color space of original image, and then click on Extract HSV button to see each channel of HSV color space from original image: