How QImage from c++ use in QML

[Mihaill]

Hi !
How QImage from c++ use in QML?
I have QImage

QImage m_iRImage;

and Q_PROPERTY

Q_PROPERTY(QImage iRImage MEMBER m_iRImage NOTIFY currentIRImageChanged)

and Image in QML (AppCore + my c++ class)

import AppCore 1.0


            Image {
                source: AppCore.iRImage
                fillMode: Image.PreserveAspectFit
            }

[sierdzio]

To use a QImage in a QML image, you need to use an image provider https://doc.qt.io/qt-5/qquickimageprovider.html.

Or, simpler way - return a path to your QImage in the property (so change your property into a QString), then QML will understand it.

[Mihaill]

Please, give me minimal work example with QQuickImageProvider.
And why here inherited from QQuickImageProvider, why not create QQuickImageProvider object?

[sierdzio]

The documentation provides an example. Not sure if I can conjure up anything better :-)

And why here inherited from QQuickImageProvider, why not create QQuickImageProvider object?

It's inherited to provide custom functionality in requestPixmap. That's what you should use, too, to provide your image.

[J.Hilk]

@Mihaill here's an example from my repository
https://github.com/DeiVadder/Sandepile-Challenge-QML

it's not a pure image provide example, but that is part of the "Sand Pile Challenge", should be minimal enough :D

[Mihaill]

I don't understand how QQuickImageProvider is passed to QML. And how to get this picture in QML?
I find example ImageProvider, but he dont work.

[KroMignon]

@Mihaill said in How QImage from c++ use in QML:

I don't understand how QQuickImageProvider is passed to QML. And how to get this picture in QML?

You have register it into QML context:

    QQuickView view;
    QQmlEngine *engine = view.engine();
    // ==> image provider will be accessible with name provided (e.g. testProvider)
    engine->addImageProvider(QLatin1String("testProvider"), new MyImageProvider);

Then in QML:

Image { source: "image://testProvider/Image.png" }

Take a look at documentation => https://doc.qt.io/qt-5/qquickimageprovider.html#an-example

[Mihaill]

It is more simple and work

QUrl imageToUrl(const QImage& image)
{
    QByteArray byteArray;
    QBuffer buffer(&byteArray);
    buffer.open(QIODevice::WriteOnly);
    image.save(&buffer, "png");
    QString base64 = QString::fromUtf8(byteArray.toBase64());
    return QString("data:image/png;base64,") + base64;
}