在 QLabel 中叠加图像以进行洋葱皮

Question

我正在尝试使用 PyQt 中的 QLabel 产生洋葱皮效果。在下面的简化示例中，使用 QPainter 将三个图像加载并绘制到标签上。

from PyQt5.QtWidgets import QApplication, QWidget, QGridLayout, QLabel
from PyQt5.QtCore import Qt, QPoint
from PyQt5.QtGui import QImage, QPixmap, QPainter
import sys
from pathlib import Path


class MainWindow(QWidget):
    def __init__(self):
        super().__init__()

        # -------------------------------------------------------------
        # Define the display.
        self.display = QLabel()

        # -------------------------------------------------------------
        # Import the frames
        frame_1 = QImage(str(Path(f'fixtures/test_onion_skin/frame_{1}.png')))
        frame_2 = QImage(str(Path(f'fixtures/test_onion_skin/frame_{2}.png')))
        frame_3 = QImage(str(Path(f'fixtures/test_onion_skin/frame_{3}.png')))    

        # -------------------------------------------------------------
        # Populate the display
        frame_1_scaled = frame_1.scaled(self.size(), Qt.KeepAspectRatio)
        frame_2_scaled = frame_2.scaled(self.size(), Qt.KeepAspectRatio)
        frame_3_scaled = frame_3.scaled(self.size(), Qt.KeepAspectRatio)

        base_pixmap = QPixmap(frame_1_scaled.size())

        painter = QPainter(base_pixmap)
        painter.drawImage(QPoint(), frame_3_scaled)
        painter.setOpacity(0.5)
        painter.drawImage(QPoint(), frame_2_scaled)
        painter.setOpacity(0.3)
        painter.drawImage(QPoint(), frame_1_scaled)
        painter.end()

        self.display.setPixmap(base_pixmap)

        # -------------------------------------------------------------
        # Set the layout.
        layout = QGridLayout()
        layout.addWidget(self.display, 0, 0)
        self.setLayout(layout)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MainWindow()
    window.show()
    app.exec()

理想情况下，最后一张图像会显示为完全不透明，而早期图像的透明度会越来越高。相反，我得到的输出是所有三个图像均等地混合在一起。这似乎是一个很容易解决的问题，但这次我的“Google Fu”并没有产生什么效果。

编辑

这里是图片文件。不幸的是，它们似乎已自动转换为 .jpg。如果有更好的方法来包含它们，请告诉我。

frame_1

frame_2

frame_3

编辑 2

经过一些实验，我决定妥协并允许对基本图像进行一些“混合”。我正在处理来自相机设备的原始图像，因此每张图像的背景总是不透明的。

如果有人对这里感兴趣，这里是代码：

from PyQt5.QtWidgets import QApplication, QWidget, QGridLayout, QLabel, QSizePolicy
from PyQt5.QtCore import Qt, QPoint
from PyQt5.QtGui import QImage, QPixmap, QPainter
import sys
from pathlib import Path


class MainWindow(QWidget):
    def __init__(self):
        super().__init__()
        # -------------------------------------------------------------
        # Define values used for image painting.
        self.first_opacity = 1      # Set first image to fully opaque so it does not blend into background.
        self.falloff_value = 0.15   # The opacity of the second image.
        self.falloff_rate = 0.5     # A factor used to decrement subsequent image transparencies.

        # -------------------------------------------------------------
        # Define the display.
        self.display = QLabel()
        self.display.setSizePolicy(QSizePolicy.MinimumExpanding, QSizePolicy.MinimumExpanding)
        self.display.setMinimumSize(1, 1)

        # -------------------------------------------------------------
        # Import frames.
        self.images = []

        for i in range(1, 4, 1):
            self.images.append(QImage(str(Path(f'fixtures/test_onion_skin/frame_{i}.png'))))

        # -------------------------------------------------------------
        # Set the display.
        self.update_display()

        # -------------------------------------------------------------
        # Set the layout.
        layout = QGridLayout()
        layout.addWidget(self.display, 0, 0)
        self.setLayout(layout)

    def update_display(self):
        # -------------------------------------------------------------
        # Define the base pixmap on which to merge images.
        base_pixmap = QPixmap(self.display.size())
        base_pixmap.fill(Qt.transparent)

        # -------------------------------------------------------------
        # Preform paint cycle for images.
        painter = QPainter(base_pixmap)

        for (image, opacity) in zip(reversed(self.images), reversed(self.get_opacities(len(self.images)))):
            painter.setOpacity(opacity)
            painter.drawImage(QPoint(), image.scaled(base_pixmap.size(), Qt.KeepAspectRatio))

        painter.end()

        # -------------------------------------------------------------
        self.display.setPixmap(base_pixmap)

    def get_opacities(self, num_images):
        # -------------------------------------------------------------
        # Define a list to store image opacity values.
        opacities = [self.first_opacity]
        value = self.falloff_value

        # -------------------------------------------------------------
        # Calculate additional opacity values if more than one image is desired.
        if num_images > 1:
            num_decrements = num_images - 1

            for i in range(1, num_decrements + 1, 1):
                opacities.insert(0, value)
                value *= self.falloff_rate

        # -------------------------------------------------------------
        return opacities

    def resizeEvent(self, event):
        self.update_display()
        event.accept()


if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MainWindow()
    window.show()
    app.exec()

Answer 1

由于 OP 不提供图像，因此问题可能是由以下原因引起的：

• 设置不透明度的顺序。
• 图片的背景颜色不透明。

对于我的演示，我将使用这个gif，并且由于背景不透明（这将是理想的），因此我将在绘制每个图像时应用蒙版。

import os
from pathlib import Path
import sys

from PyQt5.QtCore import Qt, QPoint
from PyQt5.QtGui import QColor, QImageReader, QPainter, QPixmap, QRegion
from PyQt5.QtWidgets import QApplication, QLabel, QVBoxLayout, QWidget

CURRENT_DIRECTORY = Path(__file__).resolve().parent


class MainWindow(QWidget):
    def __init__(self):
        super().__init__()

        self.display = QLabel(alignment=Qt.AlignCenter)
        lay = QVBoxLayout(self)
        lay.addWidget(self.display)

        background_color = QColor("white")

        filename = os.fspath(CURRENT_DIRECTORY / "Animhorse.gif")
        image_reader = QImageReader(filename)

        pixmap = QPixmap(image_reader.size())
        pixmap.fill(background_color)

        images = []
        while image_reader.canRead():
            images.append(image_reader.read())

        painter = QPainter(pixmap)
        for image, opacity in zip(images[3:6], (0.3, 0.7, 1.0)):
            painter.setOpacity(opacity)
            p = QPixmap.fromImage(image)
            mask = p.createMaskFromColor(background_color, Qt.MaskInColor)
            painter.setClipRegion(QRegion(mask))
            painter.drawImage(QPoint(), image)
        painter.end()

        self.display.setPixmap(pixmap)


if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = MainWindow()
    window.show()
    app.exec()