How to Build a Simple WebP Conversion Tool with Python, Qt and OpenCV

"WebP is an image format employing both lossy and lossless compression, and supports animation and alpha transparency. Developed by Google, it is designed to create files that are smaller for the same quality, or of higher quality for the same size, than JPEG, PNG, and GIF image formats" - Wikipedia. Speed is one of the key factors of SEO optimization. Developers tend to use WebP to replace JPEG, PNG, and GIF in order to make web pages SEO friendly. This article demonstrates how to build a simple WebP conversion tool with Python, Qt and OpenCV.

Installation

Python 3.x
OpenCV and Qt (pyside2 or pyside6)
```
pip install opencv-python pyside2
```

Developing the WebP Conversion Tool

Step 1: Design the layout and load UI to Python Code

Let's open Python/Lib/site-packages/PySide2/designer to design the GUI.

Label: display the loaded image.
Horizontal Slider: adjust the quality of the WebP image.
Push Button: trigger WebP conversion.
List Widget: append image files to the list.

Once the UI design is done, we convert the .ui file to .py file using pyside2-uic, which is located at Python/Scripts/.

pyside2-uic design.ui -o design.py

The next step is to load the design.py file and add the following code to the main.py file:

import sys
from PySide2.QtGui import QPixmap, QImage, QPainter, QPen, QColor
from PySide2.QtWidgets import QApplication, QMainWindow, QInputDialog
from PySide2.QtCore import QFile, QTimer, QEvent
from PySide2.QtWidgets import *
from design import Ui_MainWindow

import os
import cv2

from PySide2.QtCore import QObject, QThread, Signal

class MainWindow(QMainWindow):

    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setAcceptDrops(True)

def main():
    app = QApplication(sys.argv)
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

Now, running the main.py file will show the GUI.

Step 2: Load image files to list widget and display images

There are two ways to load an image file or a folder:

Click a button to open the system file dialog.
Drag and drop the image file or folder to the application.

To open the system file dialog, we use QFileDialog, which provides getOpenFileName to pick a file and getExistingDirectory to pick a directory.

self.ui.actionOpen_File.triggered.connect(self.openFile)
self.ui.actionOpen_Folder.triggered.connect(self.openFolder)

def openFile(self):
    filename = QFileDialog.getOpenFileName(self, 'Open File',
                                            self._path, "Barcode images (*)")

def openFolder(self):
    directory = QFileDialog.getExistingDirectory(self, 'Open Folder',
                                            self._path, QFileDialog.ShowDirsOnly)

To enable drag and drop for file and folder, we must set setAcceptDrops(True) for the MainWindow and override the dragEnterEvent and dropEvent methods:

def __init__(self):
    # ...
    self.setAcceptDrops(True)

def dragEnterEvent(self, event):
    event.acceptProposedAction()

def dropEvent(self, event):
    urls = event.mimeData().urls()
    filename = urls[0].toLocalFile()
    if os.path.isdir(filename):
        self.appendFolder(filename)
    else:
        self.appendFile(filename)
    event.acceptProposedAction()

As we get the file path, create a new list widget item and add it to the list widget:

item = QListWidgetItem()
item.setText(filename)
self.ui.listWidget.addItem(item)

To display the image in the Qt label, we need to convert Mat to QImage:

def showImage(self, filename):
    frame = cv2.imread(filename)
    frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
    image = QImage(frame, frame.shape[1], frame.shape[0], frame.strides[0], QImage.Format_RGB888)
    pixmap = QPixmap.fromImage(image)
    self._pixmap = self.resizeImage(pixmap)
    self.ui.label.setPixmap(self._pixmap)
    return frame

Step 3: Get the slider value and convert image to WebP

Because the latest OpenCV supports WebP, it is convenient to convert an image to WebP using cv2.imwrite():

quality = int(self.ui.horizontalSlider.value())
frame = cv2.imread(filename)
webp_file = filename.split('.')[0] + '.webp'
cv2.imwrite(webp_file, frame, [cv2.IMWRITE_WEBP_QUALITY, quality])

Considering the performance of operating multiple images, we move the WebP conversion code to a worker thread. In addition, showing a progress bar makes the application more responsive.

class Worker(QObject):
    finished = Signal()
    progress = Signal(object)

    def __init__(self, files, quality):
        super(Worker, self).__init__()
        self.files = files
        self.total = len(files)
        self.isRunning = True
        self.quality = quality

    def run(self):
        count = 0
        keys = list(self.files.keys())
        while self.isRunning and len(self.files) > 0:
            filename = keys[count]
            count += 1
            print(filename)
            frame = cv2.imread(filename)
            webp_file = filename.split('.')[0] + '.webp'
            cv2.imwrite(webp_file, frame, [cv2.IMWRITE_WEBP_QUALITY, self.quality])
            self.progress.emit((webp_file, count, self.total))
            self.files.pop(filename)

        self.finished.emit()

def reportProgress(self, data):
    filename, completed, total = data
    self.addImage(filename)
    if not self.isProcessing:
        return

    progress = completed
    self.progress_dialog.setLabelText(str(completed) +"/"+ str(total))
    self.progress_dialog.setValue(progress)
    if completed == total:
        self.onProgressDialogCanceled()
        self.showMessageBox('WebP Conversion', "Done!")

def onProgressDialogCanceled(self):
    self.isProcessing = False
    self.worker.isRunning = False
    self.progress_dialog.cancel()

def runLongTask(self):
    if (len(self._all_images) == 0):
        return

    self.isProcessing = True
    self.progress_dialog = QProgressDialog('Progress', 'Cancel', 0, len(self._all_images), self)
    self.progress_dialog.setLabelText('Progress')
    self.progress_dialog.setCancelButtonText('Cancel')
    self.progress_dialog.setRange(0, len(self._all_images))
    self.progress_dialog.setValue(0)
    self.progress_dialog.setMinimumDuration(0)
    self.progress_dialog.show()
    self.progress_dialog.canceled.connect(self.onProgressDialogCanceled)

    self.thread = QThread()
    self.worker = Worker(self._all_images, int(self.ui.label_slider.text()))
    self.worker.moveToThread(self.thread)
    self.thread.started.connect(self.worker.run)
    self.worker.finished.connect(self.thread.quit)
    self.worker.finished.connect(self.worker.deleteLater)
    self.thread.finished.connect(self.thread.deleteLater)
    self.worker.progress.connect(self.reportProgress)
    self.thread.start()