Qt/QML : Send QImage From C++ to QML and Display The QImage On GUI

Viewed 33887

I created a class Publisher which periodically emits a QImage object.

However I'm having a tough time drawing the QImage to a QML element. It appears that the Image and Canvas QML components require a QUrl instead of a QImage, but I'm not sure how to convert my QImage to a QUrl. Edit4: When I say QUrl, I don't mean I'm trying to convert an image to a URL. That's nonsense. I mean I want to generate a reference to this image, which is not on disk, and the data type that QML components are asking for is a URL.

I've done some research and found that QQuickImageProvider provides a solution, but I haven't found any documentation explaining how to convert my QImage signal to a QUrl that I can use for drawing. Any example code or reference documentation would be appreciated.

Thanks for your help!

Edit1:

I've taken a look here: http://qt-project.org/doc/qt-5.0/qtquick/qquickimageprovider.html and I do not see how I pass a QImage to the quick image provider and from it create a QUrl.

Edit2. Here is the header. The implementation should not be important.

class Publisher
{
    Q_OBJECT

public:
    Publisher(QObject* parent = 0);

    virtual ~Publisher(void);

Q_SIGNALS:

    void newImage(const QImage& newImage);
};

Edit 3. Here is my QML code, but I don't know how to draw my QImage, so this code is kind of meaningless.

my main.cpp file:

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    qmlRegisterType<Publisher>("Components", 1, 0, "Publisher");

    QtQuick2ApplicationViewer viewer;
    viewer.setMainQmlFile(QStringLiteral("qml/QQuickViewExample/main.qml"));
    viewer.showExpanded();

    return app.exec();
}

my main.qml file:

import QtQuick 2.0
import Components 1.0

Rectangle {
    id : testRect
    width: 360
    height: 360

    Image{
        anchors.fill: parent
        id: myImage

        Publisher {
            id: myPub

            onNewImage: {
                myImage.source = newImage;  #I know this doesnt work, it needs a QUrl and not a QImage
            }
        }
    }
}
4 Answers
QString getImage()
{
QByteArray byteArray;
QBuffer buffer(&byteArray);
buffer.open(QIODevice::WriteOnly);
img.save(&buffer,"JPEG");
 //save image data in string
QString image("data:image/jpg;base64,");
image.append(QString::fromLatin1(byteArray.toBase64().data()));
return image;
}

send image string directly to qml source

Use QQuickItem. There is a Qt example that does this.

C:\Qt\Examples\Qt-5.14.1\quick\scenegraph\threadedanimation

You make a class derived from QQuickItem and register it with qmlRegisterType. Provide the override function 'updatePaintNode' in your class. In the example, the class is 'Spinner'

In updatePaintNode:

Create a node class derived from QObject and QSGTransformNode

In the node class constructor:

Convert your Qimage to an QSGTexture with createTextureFromImage.

Create QSGSimpleTextureNode, set QSGTexture using setTexture

appendChildNode with QSGSimpleTextureNode

In QML add

import Spinner 1.0

and

Spinner {
    anchors.centerIn: parent
    anchors.horizontalCenterOffset: 80
    spinning: true
}
Related