Currently I am developing an application that captures images and should display them via a Qt’s QML frontend. I thought that would be an easy task because I am familiar with QML and collected my own experiences in the last months.

So I got the QImages continously from my capturing thread. I updated my QImage member variable and wanted to display it via a QML image structure via the source tag and recognised this does not work….After a research session an trying out different ways to solve this problem I want to share my knowledge with all of you out there that do have the same problem. The order of the solutions is also the ranking, beginning from the best one (for me):

1. QPainter
Here I use a user defined QML item called ImageItem and paint the content of the image by a QPainter. For me it worked best but you have to take care by yourself about the image output.

// ImageItem.h
#ifndef IMAGEITEM_H
#define IMAGEITEM_H
#include <QQuickPaintedItem>
#include <QQuickItem>
#include <QPainter>
#include <QImage>

class ImageItem : public QQuickPaintedItem
{
Q_OBJECT
    Q_PROPERTY(QImage image READ image WRITE setImage NOTIFY imageChanged)
public:
    ImageItem(QQuickItem *parent = nullptr);
    Q_INVOKABLE void setImage(const QImage &image);
    void paint(QPainter *painter);
    QImage image() const;
signals:
    void imageChanged();
private:
    QImage current_image;
};
#endif // IMAGEITEM_H

// ImageItem.cpp
#include "ImageItem.h"

ImageItem::ImageItem(QQuickItem *parent) : QQuickPaintedItem(parent)
{    
this->current_image = QImage(":/images/no_image.png");
}

void ImageItem::paint(QPainter *painter)
{
    QRectF bounding_rect = boundingRect();
    QImage scaled = this->current_image.scaledToHeight(bounding_rect.height());
    QPointF center = bounding_rect.center() - scaled.rect().center();

    if(center.x() < 0)
        center.setX(0);
    if(center.y() < 0)
        center.setY(0);
   painter->drawImage(center, scaled);
}

QImage ImageItem::image() const
{    return this->current_image;
}

void ImageItem::setImage(const QImage &image)
{
    this->current_image = image;
    update();
}

Don’t forget to register the user defined item:

main.cpp
...
qmlRegisterType<ImageItem>("myextension", 1, 0, "ImageItem");
...

Then use it in your QML:

// main.qml
import myextension 1.0
...
ImageItem {
  id: liveImageItem
  height: parent.height
  width: parent.width
}
...

2. QImageProvider
Here you create your own QQuickImageProvider that is used to display the image. This should be the preferred solution but caused flickering output errors on animations of my user interface. So it got the good 2nd place.

// LiveImageProvider.h
#ifndef LIVEIMAGEPROVIDER_H
#define LIVEIMAGEPROVIDER_H

#include <QImage>
#include <QQuickImageProvider>

class LiveImageProvider : public QObject, public QQuickImageProvider
{
    Q_OBJECT
public:
    LiveImageProvider();

    QImage requestImage(const QString &id, QSize *size, const QSize &requestedSize) override;

public slots:
    void updateImage(const QImage &image);

signals:
    void imageChanged();

private:
    QImage image;
    QImage no_image;
};

#endif // LIVEIMAGEPROVIDER_H

// LiveImageProvider.cpp
#include "LiveImageProvider.h"
#include <QDebug>
/**
* @brief Image provider that is used to handle the live image stream in the QML viewer.
 */
LiveImageProvider::LiveImageProvider() : QQuickImageProvider(QQuickImageProvider::Image)
{
    this->no_image = QImage(":/images/no_image.png");
    this->blockSignals(false);
}

/**
 * @brief Delivers image. The id is not used.
 * @param id The id is the requested image source, with the "image:" scheme and provider identifier removed.
 * For example, if the image source was "image://myprovider/icons/home", the given id would be "icons/home".
 * @param size In all cases, size must be set to the original size of the image. This is used to set the
 * width and height of the relevant Image if these values have not been set explicitly.
 * @param requestedSize The requestedSize corresponds to the Image::sourceSize requested by an Image item.
 * If requestedSize is a valid size, the image returned should be of that size.
 * @return
 */
QImage LiveImageProvider::requestImage(const QString &id, QSize *size, const QSize &requestedSize)
{
    QImage result = this->image;

    if(result.isNull()) {
        result = this->no_image;
    }

    if(size) {
        *size = result.size();
    }

    if(requestedSize.width() > 0 && requestedSize.height() > 0) {
        result = result.scaled(requestedSize.width(), requestedSize.height(), Qt::KeepAspectRatio);
    }

    return result;
}

/**
 * @brief Update of the current image.
 * @param image The new image.
 */
void LiveImageProvider::updateImage(const QImage &image)
{
    if(this->image != image) {
        this->image = image;
        emit imageChanged();
    }
}

Keep attention to the reload() function because to update the scene graph that finally displays the content you need to change the (dummy) source.

// main.qml
...
Image {
  id: liveImage
  property bool counter: false

  asynchronous: true
  source: "image://live/image"
  anchors.fill: parent
  fillMode: Image.PreserveAspectFit
  cache: false


  function reload() {
    counter = !counter
    source = "image://live/image?id=" + counter
  }
  }
...

Dont’t forget to register the new image provider.

// main.cpp
...
QScopedPointer<LiveImageProvider> liveImageProvider(new LiveImageProvider());
QQmlApplicationEngine engine;
engine.rootContext()->setContextProperty("liveImageProvider", liveImageProvider.data());
engine.addImageProvider("live", liveImageProvider.data());
engine.load(QUrl(QLatin1String("qrc:/main.qml")));
...

3. QString
This solution creates a string out of the QImage. This string is set to the source property of the QML image tag. Why this is the worst solution: a lot of conversions and copies, need prior knowledge about the image type (jpg/png/…).

QString ImageViewer::imageData() const
 {
 QByteArray bArray;
 QBuffer buffer(&bArray);
 buffer.open(QIODevice::WriteOnly);
 this->image.save(&buffer, "JPEG");

QString image("data:image/jpg;base64,");
 image.append(QString::fromLatin1(bArray.toBase64().data()));

return image;
 }