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;
}