How to display .png image using image provider with detail explanation

Question

i want to send the dynamic image to qml and display on Qt gui i read online image provider is way to solve this issue but i want any sample and simple application which does this.

Answer 1

You should create an image provider class where you load your image, this is a simplified example.

qmlimageprovider.h

#ifndef QMLIMAGEPROVIDER_H
#define QMLIMAGEPROVIDER_H
#include <QQuickImageProvider>


class QmlImageProvider : public QQuickImageProvider
{
public:
    QmlImageProvider();
    QImage requestImage(const QString &id, QSize *size, const QSize &requestedSize) override;
    void updateImage(QImage new_image);

private:
    QImage image;
};

#endif // QMLIMAGEPROVIDER_H

qmlimageprovider.cpp

#include "qmlimageprovider.h"

QmlImageProvider::QmlImageProvider()
 : QQuickImageProvider(QQuickImageProvider::Image)
{
}

QImage QmlImageProvider::requestImage(const QString &id, QSize *size, const QSize &requestedSize)
{
    image.load("/home/ubuntu/music.jpg");
    return image;
}

void QmlImageProvider::updateImage(QImage new_image)
{
    image = new_image;
}

Then you should register this class to your QML engine.

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "qmlimageprovider.h"

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.addImageProvider(QLatin1String("imageprovider"),
                            new QmlImageProvider());

    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

Finally you can use imageprovider in your qml page and don't forget to write image reload function because images will be cache and you need to reload in order to change them.

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.3


Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Connections {
        target: imageprovider
        onNewFrameReceived: image.reload();
    }
    Item {
        id: name
        width: parent.width
        height: parent.height
        Rectangle
        {
            id: progressBackground
            height: parent.height
            width: parent.width
            Text {
                id: text
                text: qsTr("click to show")
                color: "#c400c4"
            }
            MouseArea {
                id: progressArea
                anchors.fill: progressBackground
                onClicked:
                {
                    image.source = "image://imageprovider/cover"
                }
            }
        }

        Image {
            id: image
            anchors.left: text.right
            source: ""
            cache: false
            function reload() {
                var oldSource = source;
                source = "";
                source = oldSource;
                console.log("reload")
            }
        }
    }
}

You can call imageprovider update function to change the image.