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

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.