[PySide / PyQt] Offset two images with keyboard increments

[carecavoador]

Hello fellow Pythonistas.

I'm working on a little side project. The goai is: I need to load two images, then invert the pixels of the second image and change it's opacity to 50%. Finally I blend the two images and display the result. This part is actually working in the minimum example given.

This is used to show the differences between two images, where pixels with equal values are displayed in gray and the differences are highlighted. I included two mokup images so you can see for yourself.

The thing is: it only works if the two images are the exact same size, or they will not align perfectly.

I'd like to add the functionality to move the second image over the first using the keyboard to shift the second image's position (or the mouse or both), so I can offset it's relative position aligning the two images and show the result "in real time". But I can't wrap my head around this problem. Any suggestions?

Anyway, thank you for your time. I always learn a lot with your insights.

Here is what I've got so far:

import sys
import copy

from PySide6.QtWidgets import QApplication, QMainWindow, QGraphicsView, QGraphicsScene, QGraphicsPixmapItem
from PySide6.QtGui import QPixmap, QImage, QPainter
from PySide6.QtCore import QRectF


# Test images
IMAGE_A = "test_image_a.jpg"
IMAGE_B = "test_image_b.jpg"


class DifferenceViewer(QMainWindow):
    def __init__(self):
        super().__init__()

        self.image_a = QImage(IMAGE_A)
        self.image_b = QImage(IMAGE_B)
        self.composite_image = None

        self.scene = QGraphicsScene()
        self.view = QGraphicsView()
        self.view.setScene(self.scene)
        self.view.setDragMode(QGraphicsView.ScrollHandDrag)
        self.view.setRenderHint(QPainter.SmoothPixmapTransform)
        self.view.setRenderHint(QPainter.Antialiasing)
        self.view.setViewportUpdateMode(QGraphicsView.FullViewportUpdate)

        self.setMinimumSize(800, 600)
        self.setCentralWidget(self.view)

        self.show_differences()


    def show_differences(self):
        """
        Inverts `self.image_b` and blends it with 50% opacity over
        `self.image_a` making equal color pixels appear gray.
        """
        composite = copy.copy(self.image_a)

        other = copy.copy(self.image_b)
        other.invertPixels()

        painter = QPainter()
        painter.begin(composite)
        painter.setOpacity(0.5)
        painter.drawImage(0, 0, other)
        painter.end()

        self.composite_image = composite
        self.display_image(composite)


    def display_image(self, image: QImage):
        """
        This method cleans `sef.scene` and displays a new image. It's not
        really necessary in this example, but I decided to include it anyway...
        """
        self.scene.clear()
        self.view.update()
        pixmap = QPixmap.fromImage(image)
        item = QGraphicsPixmapItem(pixmap)
        self.scene.addItem(item)
        self.view.setSceneRect(QRectF(pixmap.rect()))
        self.view.setScene(self.scene)


if __name__ == "__main__":
    app = QApplication(sys.argv)
    viewer = DifferenceViewer()
    viewer.show()
    sys.exit(app.exec())

[deanhystad]

I would use PIL to merge the images.
1. Calculate the overlap of the two images.
2. Clip the overlapping parts. They will be the same size.
3. Merge the parts. Image will be opaque.
4. Paste over the underlying image in appropriate place.