QML and C++ image interoperability

Question

I've looked through the documentation and also whatever I could find on the internet, but it doesn't seem like it is possible to access a QML Image from C++.

Is there a way to work around that?

dtech dtech · Accepted Answer · 2014-12-11T18:09:26

It was possible to do in QtQuick1 but that functionality was removed in QtQuick2.

The solution I've come up with allows to have the same image in QML and C++ by implementing a QQuickImageProvider that basically works with QPixmap * which is converted to string and then back to a pointer type(it does sound a little unsafe but has proven to work quite well).

class Pixmap : public QObject {
    Q_OBJECT
    Q_PROPERTY(QString data READ data NOTIFY dataChanged)
public:
    Pixmap(QObject * p = 0) : QObject(p), pix(0) {}
    ~Pixmap() { if (pix) delete pix; }

    QString data() {
        if (pix) return "image://pixmap/" + QString::number((qulonglong)pix);
        else return QString();
    }

public slots:
    void load(QString url) {
        QPixmap * old = 0;
        if (pix) old = pix;
        pix = new QPixmap(url);
        emit dataChanged();
        if (old) delete old;
    }

    void clear() {
        if (pix) delete pix;
        pix = 0;
        emit dataChanged();
    }

signals:
    void dataChanged();

private:
    QPixmap * pix;
};

The implementation of the Pixmap element is pretty straightforward, although the initial was a bit limited, since the new pixmap happened to be allocated at the exactly same memory address the data string was the same for different images, causing the QML Image component to not update, but the solution was as simple as deleting the old pixmap only after the new one has been allocated. Here is the actual image provider:

class PixmapProvider : public QQuickImageProvider {
public:
    PixmapProvider() : QQuickImageProvider(QQuickImageProvider::Pixmap) {}
    QPixmap requestPixmap(const QString &id, QSize *size, const QSize &requestedSize) {
        qulonglong d = id.toULongLong();
        if (d) {
            QPixmap * p = reinterpret_cast<QPixmap *>(d);
            return *p;
        } else {
            return QPixmap();
        }
    }
};

Registration:

//in main()
engine.addImageProvider("pixmap", new PixmapProvider);
qmlRegisterType<Pixmap>("Test", 1, 0, "Pixmap");

And this is how you use it in QML:

Pixmap {
    id: pix
}

Image {
    source: pix.data
}

// and then pix.load(path)

ALSO Note that in my case there was no actual modification of the pixmap that needed to be updated in QML. This solution will not auto-update the image in QML if it is changed in C++, because the address in memory will stay the same. But the solution for this is just as straightforward - implement an update() method that allocates a new QPixmap(oldPixmap) - it will use the same internal data but give you a new accessor to it with a new memory address, which will trigger the QML image to update on changes. This means the proffered method to access the pixmap will be through the Pixmap class, not directly from the QPixmap * since you will need the Pixmap class to trigger the data change, so just add an accessor for pix, and just in case you do complex or threaded stuff, you might want to use QImage instead and add a mutex so that the underlying data is not changed in QML while being changed in C++ or the other way around.

QML and C++ image interoperability

1 Answers