How to add an image on the top of another image?

Question

I want to show difference between a trimed clip and non trimed clip in my video editor application, i.e. I want to add a small film image on my thumbnail for a trimed clip. How can I do this?

It would be just to show the difference between an image and a video in our gallery application.

How to add an image on the top of another one in Qt?

Answer 1

Open the QPainter on the bottom image and draw the top image using its drawPixmap()/drawImage() methods.

QPixmap base, overlay; // come from your code
{
    QPainter painter(base);
    painter.drawPixmap(100, 100, overlay);
}

If your overlay contains an alpha channel (e.g. fancy PNG icon) and your base image does not, you should create a new QPixmap with an alpha channel and draw both images into it:

QPixmap base, overlay; // come from your code
QPixmap result(base.width(), base.height());
result.fill(Qt::transparent); // force alpha channel
{
    QPainter painter(&result);
    painter.drawPixmap(0, 0, base);
    painter.drawPixmap(100, 100, overlay);
}

QPixmaps and QImages can be used interchangeably, although not all combinations give good performance).

Answer 2

If it's just about showing an image above another, then you could also go with this answer.

QGridLayout *layout = new QGridLayout(widget);
Pixmap base, overlay;
QLabel *background = new Label();
background->setPixmap(&base);
QLabel *lOverlay = new QLabel();
lOverlay->setPixmap(&overlay);

//label gets positioned above textBrowser and is an overlay
layout->addWidget(background, 0, 0, Qt::AlignLeft | Qt::AlignTop);
layout->addWidget(lOverlay, 0, 0, Qt::AlignRight | Qt::AlignBottom); 

Of course then the QPixbuf of the background doesn't contain the QPixbuf of the overlay-image, but it only appears to do.