Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to display a QPixmap/QImage in QML?
Forum Updated to NodeBB v4.3 + New Features

How to display a QPixmap/QImage in QML?

Scheduled Pinned Locked Moved Solved QML and Qt Quick
15 Posts 10 Posters 24.8k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • ? A Former User

    @KroMignon Hi! Here is a skeleton for a simple approach:

    pixmapcontainer.h - pass around objects of this type between C++ and QML

    #ifndef PIXMAPCONTAINER_H
#define PIXMAPCONTAINER_H

#include <QObject>
#include <QPixmap>

class PixmapContainer : public QObject
{
    Q_OBJECT
public:
    explicit PixmapContainer(QObject *parent = 0);
    QPixmap pixmap;
};

#endif // PIXMAPCONTAINER_H

    backend.h - provides the pixmaps

    #ifndef BACKEND_H
#define BACKEND_H

#include <QObject>

class Backend : public QObject
{
    Q_OBJECT
public:
    explicit Backend(QObject *parent = 0);
    Q_INVOKABLE QObject* getPixmapContainer() const;
};

#endif // BACKEND_H

    backend.cpp

    #include "backend.h"
#include <QQmlEngine>
#include "pixmapcontainer.h"

Backend::Backend(QObject *parent) :
    QObject(parent)
{
}

QObject *Backend::getPixmapContainer() const
{
    PixmapContainer * pc = new PixmapContainer();
    pc->pixmap.load("/path/to/image.jpg");
    Q_ASSERT(!pc->pixmap.isNull());
    QQmlEngine::setObjectOwnership(pc, QQmlEngine::JavaScriptOwnership);
    return pc;
}

    pixmapimage.h - QtQuick component to show pixmaps

    #ifndef PIXMAPIMAGE_H
#define PIXMAPIMAGE_H

#include <QQuickPaintedItem>
#include <QPainter>
#include "pixmapcontainer.h"

class PixmapImage : public QQuickPaintedItem
{
    Q_OBJECT
public:
    PixmapImage(QQuickItem *parent = Q_NULLPTR);
    Q_INVOKABLE void setImage(QObject *pixmapContainer);

protected:
    virtual void paint(QPainter *painter) Q_DECL_OVERRIDE;

private:
    PixmapContainer m_pixmapContainer;
};

#endif // PIXMAPIMAGE_H

    pixmapimage.cpp

    #include "pixmapimage.h"

PixmapImage::PixmapImage(QQuickItem *parent) :
    QQuickPaintedItem(parent)
{
}

void PixmapImage::setImage(QObject *pixmapContainer)
{
    PixmapContainer *pc = qobject_cast<PixmapContainer*>(pixmapContainer);
    Q_ASSERT(pc);
    m_pixmapContainer.pixmap = pc->pixmap;
    update();
}

void PixmapImage::paint(QPainter *painter)
{
    painter->drawPixmap(0, 0, width(), height(), m_pixmapContainer.pixmap);
}

    main.cpp

    #include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>

#include "pixmapcontainer.h"
#include "backend.h"
#include "pixmapimage.h"

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

    qmlRegisterType<PixmapContainer>("io.qt.forum", 1, 0, "PixmapContainer");
    qmlRegisterType<Backend>("io.qt.forum", 1, 0, "Backend");
    qmlRegisterType<PixmapImage>("io.qt.forum", 1, 0, "PixmapImage");

    QQmlApplicationEngine engine;
    Backend backend;
    engine.rootContext()->setContextProperty("backend", &backend);
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    return app.exec();
}

    main.qml

    import QtQuick 2.7
import QtQuick.Controls 1.5
import io.qt.forum 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    PixmapImage {
        id: pixmapImage
        anchors.fill: parent
    }

    Button {
        text: "Get Pixmap"
        onClicked: pixmapImage.setImage( backend.getPixmapContainer() )
    }
}
    Julian GuarinJ Offline
    Julian GuarinJ Offline
    Julian Guarin
    wrote on last edited by
    #5

    @Wieland said in How to display a QPixmap/QImage in QML?:

    qmlRegisterType<PixmapContainer>("io.qt.forum", 1, 0, "PixmapContainer");
    qmlRegisterType<Backend>("io.qt.forum", 1, 0, "Backend");
    qmlRegisterType<PixmapImage>("io.qt.forum", 1, 0, "PixmapImage");

    @Wieland Why did you register the backend & container objects? Why would you access such objects in the QML? Just being curious...

    ? 1 Reply Last reply
    1
    • Julian GuarinJ Julian Guarin

      @Wieland said in How to display a QPixmap/QImage in QML?:

      qmlRegisterType<PixmapContainer>("io.qt.forum", 1, 0, "PixmapContainer");
      qmlRegisterType<Backend>("io.qt.forum", 1, 0, "Backend");
      qmlRegisterType<PixmapImage>("io.qt.forum", 1, 0, "PixmapImage");

      @Wieland Why did you register the backend & container objects? Why would you access such objects in the QML? Just being curious...

      ? Offline
      ? Offline
      A Former User
      wrote on last edited by A Former User
      #6

      @Julian-Guarin You're right, registering those wasn't necessary here.

      1 Reply Last reply
      2
      • ? A Former User

        @KroMignon Hi! Here is a skeleton for a simple approach:

        pixmapcontainer.h - pass around objects of this type between C++ and QML

        #ifndef PIXMAPCONTAINER_H
#define PIXMAPCONTAINER_H

#include <QObject>
#include <QPixmap>

class PixmapContainer : public QObject
{
    Q_OBJECT
public:
    explicit PixmapContainer(QObject *parent = 0);
    QPixmap pixmap;
};

#endif // PIXMAPCONTAINER_H

        backend.h - provides the pixmaps

        #ifndef BACKEND_H
#define BACKEND_H

#include <QObject>

class Backend : public QObject
{
    Q_OBJECT
public:
    explicit Backend(QObject *parent = 0);
    Q_INVOKABLE QObject* getPixmapContainer() const;
};

#endif // BACKEND_H

        backend.cpp

        #include "backend.h"
#include <QQmlEngine>
#include "pixmapcontainer.h"

Backend::Backend(QObject *parent) :
    QObject(parent)
{
}

QObject *Backend::getPixmapContainer() const
{
    PixmapContainer * pc = new PixmapContainer();
    pc->pixmap.load("/path/to/image.jpg");
    Q_ASSERT(!pc->pixmap.isNull());
    QQmlEngine::setObjectOwnership(pc, QQmlEngine::JavaScriptOwnership);
    return pc;
}

        pixmapimage.h - QtQuick component to show pixmaps

        #ifndef PIXMAPIMAGE_H
#define PIXMAPIMAGE_H

#include <QQuickPaintedItem>
#include <QPainter>
#include "pixmapcontainer.h"

class PixmapImage : public QQuickPaintedItem
{
    Q_OBJECT
public:
    PixmapImage(QQuickItem *parent = Q_NULLPTR);
    Q_INVOKABLE void setImage(QObject *pixmapContainer);

protected:
    virtual void paint(QPainter *painter) Q_DECL_OVERRIDE;

private:
    PixmapContainer m_pixmapContainer;
};

#endif // PIXMAPIMAGE_H

        pixmapimage.cpp

        #include "pixmapimage.h"

PixmapImage::PixmapImage(QQuickItem *parent) :
    QQuickPaintedItem(parent)
{
}

void PixmapImage::setImage(QObject *pixmapContainer)
{
    PixmapContainer *pc = qobject_cast<PixmapContainer*>(pixmapContainer);
    Q_ASSERT(pc);
    m_pixmapContainer.pixmap = pc->pixmap;
    update();
}

void PixmapImage::paint(QPainter *painter)
{
    painter->drawPixmap(0, 0, width(), height(), m_pixmapContainer.pixmap);
}

        main.cpp

        #include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>

#include "pixmapcontainer.h"
#include "backend.h"
#include "pixmapimage.h"

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

    qmlRegisterType<PixmapContainer>("io.qt.forum", 1, 0, "PixmapContainer");
    qmlRegisterType<Backend>("io.qt.forum", 1, 0, "Backend");
    qmlRegisterType<PixmapImage>("io.qt.forum", 1, 0, "PixmapImage");

    QQmlApplicationEngine engine;
    Backend backend;
    engine.rootContext()->setContextProperty("backend", &backend);
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    return app.exec();
}

        main.qml

        import QtQuick 2.7
import QtQuick.Controls 1.5
import io.qt.forum 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    PixmapImage {
        id: pixmapImage
        anchors.fill: parent
    }

    Button {
        text: "Get Pixmap"
        onClicked: pixmapImage.setImage( backend.getPixmapContainer() )
    }
}
        M Offline
        M Offline
        Mickey Rockman
        wrote on last edited by
        #7

        This is a very good example. I follow the code and it works exactly as I expected.
        Thank you so much

        1 Reply Last reply
        1
        • ? A Former User

          @KroMignon Hi! Here is a skeleton for a simple approach:

          pixmapcontainer.h - pass around objects of this type between C++ and QML

          #ifndef PIXMAPCONTAINER_H
#define PIXMAPCONTAINER_H

#include <QObject>
#include <QPixmap>

class PixmapContainer : public QObject
{
    Q_OBJECT
public:
    explicit PixmapContainer(QObject *parent = 0);
    QPixmap pixmap;
};

#endif // PIXMAPCONTAINER_H

          backend.h - provides the pixmaps

          #ifndef BACKEND_H
#define BACKEND_H

#include <QObject>

class Backend : public QObject
{
    Q_OBJECT
public:
    explicit Backend(QObject *parent = 0);
    Q_INVOKABLE QObject* getPixmapContainer() const;
};

#endif // BACKEND_H

          backend.cpp

          #include "backend.h"
#include <QQmlEngine>
#include "pixmapcontainer.h"

Backend::Backend(QObject *parent) :
    QObject(parent)
{
}

QObject *Backend::getPixmapContainer() const
{
    PixmapContainer * pc = new PixmapContainer();
    pc->pixmap.load("/path/to/image.jpg");
    Q_ASSERT(!pc->pixmap.isNull());
    QQmlEngine::setObjectOwnership(pc, QQmlEngine::JavaScriptOwnership);
    return pc;
}

          pixmapimage.h - QtQuick component to show pixmaps

          #ifndef PIXMAPIMAGE_H
#define PIXMAPIMAGE_H

#include <QQuickPaintedItem>
#include <QPainter>
#include "pixmapcontainer.h"

class PixmapImage : public QQuickPaintedItem
{
    Q_OBJECT
public:
    PixmapImage(QQuickItem *parent = Q_NULLPTR);
    Q_INVOKABLE void setImage(QObject *pixmapContainer);

protected:
    virtual void paint(QPainter *painter) Q_DECL_OVERRIDE;

private:
    PixmapContainer m_pixmapContainer;
};

#endif // PIXMAPIMAGE_H

          pixmapimage.cpp

          #include "pixmapimage.h"

PixmapImage::PixmapImage(QQuickItem *parent) :
    QQuickPaintedItem(parent)
{
}

void PixmapImage::setImage(QObject *pixmapContainer)
{
    PixmapContainer *pc = qobject_cast<PixmapContainer*>(pixmapContainer);
    Q_ASSERT(pc);
    m_pixmapContainer.pixmap = pc->pixmap;
    update();
}

void PixmapImage::paint(QPainter *painter)
{
    painter->drawPixmap(0, 0, width(), height(), m_pixmapContainer.pixmap);
}

          main.cpp

          #include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>

#include "pixmapcontainer.h"
#include "backend.h"
#include "pixmapimage.h"

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

    qmlRegisterType<PixmapContainer>("io.qt.forum", 1, 0, "PixmapContainer");
    qmlRegisterType<Backend>("io.qt.forum", 1, 0, "Backend");
    qmlRegisterType<PixmapImage>("io.qt.forum", 1, 0, "PixmapImage");

    QQmlApplicationEngine engine;
    Backend backend;
    engine.rootContext()->setContextProperty("backend", &backend);
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    return app.exec();
}

          main.qml

          import QtQuick 2.7
import QtQuick.Controls 1.5
import io.qt.forum 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    PixmapImage {
        id: pixmapImage
        anchors.fill: parent
    }

    Button {
        text: "Get Pixmap"
        onClicked: pixmapImage.setImage( backend.getPixmapContainer() )
    }
}
          YunusY Offline
          YunusY Offline
          Yunus
          wrote on last edited by Yunus
          #8

          Hi, I just copied this example but I got some errors. in "backend.cpp" and "pixmapimage.cpp" . The errors are the same and:

          error: undefined reference to `PixmapContainer::PixmapContainer(QObject*)'

          What is the problem?

          jsulmJ 1 Reply Last reply
          0
          • YunusY Yunus

            Hi, I just copied this example but I got some errors. in "backend.cpp" and "pixmapimage.cpp" . The errors are the same and:

            error: undefined reference to `PixmapContainer::PixmapContainer(QObject*)'

            What is the problem?

            jsulmJ Offline
            jsulmJ Offline
            jsulm
            Lifetime Qt Champion
            wrote on last edited by jsulm
            #9

            @yunus said in How to display a QPixmap/QImage in QML?:

            What is the problem?

            The problem is right there in the error message.
            Where is PixmapContainer::PixmapContainer(QObject*) defined?
            I guess you forgot to add the cpp file for PixmapContainer.

            Or change this line

            explicit PixmapContainer(QObject *parent = 0);

            to

            explicit PixmapContainer(QObject *parent = 0) : QObject(parent) {}

            https://forum.qt.io/topic/113070/qt-code-of-conduct

            YunusY 2 Replies Last reply
            3
            • jsulmJ jsulm

              @yunus said in How to display a QPixmap/QImage in QML?:

              What is the problem?

              The problem is right there in the error message.
              Where is PixmapContainer::PixmapContainer(QObject*) defined?
              I guess you forgot to add the cpp file for PixmapContainer.

              Or change this line

              explicit PixmapContainer(QObject *parent = 0);

              to

              explicit PixmapContainer(QObject *parent = 0) : QObject(parent) {}
              YunusY Offline
              YunusY Offline
              Yunus
              wrote on last edited by
              #10

              @jsulm yes I didnt add it because in the example there is no file named as pixmapcontainer.cpp

              1 Reply Last reply
              0
              • jsulmJ jsulm

                @yunus said in How to display a QPixmap/QImage in QML?:

                What is the problem?

                The problem is right there in the error message.
                Where is PixmapContainer::PixmapContainer(QObject*) defined?
                I guess you forgot to add the cpp file for PixmapContainer.

                Or change this line

                explicit PixmapContainer(QObject *parent = 0);

                to

                explicit PixmapContainer(QObject *parent = 0) : QObject(parent) {}
                YunusY Offline
                YunusY Offline
                Yunus
                wrote on last edited by
                #11

                @jsulm Ahh okey. After added the line you advised it worked thak you so much

                1 Reply Last reply
                1
                • KroMignonK KroMignon

                  @Wieland Thanks a lot for your code example. This was very interresting, but still to much overhead for my very simple use case!

                  I found an alternative solution, which works fine for me. I post it as reply to my question if someone else has the same needs.
                  To pass the QImage to QML, I simply serialize into a QByteArray like this:

                  
Q_PROPERTY(QString picture READ picture CONSTANT)

...

const QString MyImageClasse::picture()
{
   QImage myImage;
  // Some init code to setup the image (e.g. loading a PGN/JPEG, etc.)
  QByteArray bArray;
  QBuffer buffer(&bArray);
  buffer.open(QIODevice::WriteOnly);
  myImage.save(&buffer, "JPEG");

  QString image("data:image/jpg;base64,");
  image.append(QString::fromLatin1(bArray.toBase64().data()));

  return image;
}

...

                  Works for me (TM) ;-)

                  Regards

                  H Offline
                  H Offline
                  Huang Zhen
                  wrote on last edited by
                  #12

                  @KroMignon It works, thank you!

                  1 Reply Last reply
                  0
                  • KroMignonK KroMignon

                    @Wieland Thanks a lot for your code example. This was very interresting, but still to much overhead for my very simple use case!

                    I found an alternative solution, which works fine for me. I post it as reply to my question if someone else has the same needs.
                    To pass the QImage to QML, I simply serialize into a QByteArray like this:

                    
Q_PROPERTY(QString picture READ picture CONSTANT)

...

const QString MyImageClasse::picture()
{
   QImage myImage;
  // Some init code to setup the image (e.g. loading a PGN/JPEG, etc.)
  QByteArray bArray;
  QBuffer buffer(&bArray);
  buffer.open(QIODevice::WriteOnly);
  myImage.save(&buffer, "JPEG");

  QString image("data:image/jpg;base64,");
  image.append(QString::fromLatin1(bArray.toBase64().data()));

  return image;
}

...

                    Works for me (TM) ;-)

                    Regards

                    fcarneyF Offline
                    fcarneyF Offline
                    fcarney
                    wrote on last edited by
                    #13

                    @KroMignon said in How to display a QPixmap/QImage in QML?:

                    I found an alternative solution

                    So are you feeding that string to the "source" property of QML Image?

                    C++ is a perfectly valid school of magic.

                    KroMignonK 1 Reply Last reply
                    1
                    • fcarneyF fcarney

                      @KroMignon said in How to display a QPixmap/QImage in QML?:

                      I found an alternative solution

                      So are you feeding that string to the "source" property of QML Image?

                      KroMignonK Offline
                      KroMignonK Offline
                      KroMignon
                      wrote on last edited by
                      #14

                      @fcarney said in How to display a QPixmap/QImage in QML?:

                      So are you feeding that string to the "source" property of QML Image?

                      Yes

                      It is an old maxim of mine that when you have excluded the impossible, whatever remains, however improbable, must be the truth. (Sherlock Holmes)

                      1 Reply Last reply
                      2
                      • ? A Former User

                        @KroMignon Hi! Here is a skeleton for a simple approach:

                        pixmapcontainer.h - pass around objects of this type between C++ and QML

                        #ifndef PIXMAPCONTAINER_H
#define PIXMAPCONTAINER_H

#include <QObject>
#include <QPixmap>

class PixmapContainer : public QObject
{
    Q_OBJECT
public:
    explicit PixmapContainer(QObject *parent = 0);
    QPixmap pixmap;
};

#endif // PIXMAPCONTAINER_H

                        backend.h - provides the pixmaps

                        #ifndef BACKEND_H
#define BACKEND_H

#include <QObject>

class Backend : public QObject
{
    Q_OBJECT
public:
    explicit Backend(QObject *parent = 0);
    Q_INVOKABLE QObject* getPixmapContainer() const;
};

#endif // BACKEND_H

                        backend.cpp

                        #include "backend.h"
#include <QQmlEngine>
#include "pixmapcontainer.h"

Backend::Backend(QObject *parent) :
    QObject(parent)
{
}

QObject *Backend::getPixmapContainer() const
{
    PixmapContainer * pc = new PixmapContainer();
    pc->pixmap.load("/path/to/image.jpg");
    Q_ASSERT(!pc->pixmap.isNull());
    QQmlEngine::setObjectOwnership(pc, QQmlEngine::JavaScriptOwnership);
    return pc;
}

                        pixmapimage.h - QtQuick component to show pixmaps

                        #ifndef PIXMAPIMAGE_H
#define PIXMAPIMAGE_H

#include <QQuickPaintedItem>
#include <QPainter>
#include "pixmapcontainer.h"

class PixmapImage : public QQuickPaintedItem
{
    Q_OBJECT
public:
    PixmapImage(QQuickItem *parent = Q_NULLPTR);
    Q_INVOKABLE void setImage(QObject *pixmapContainer);

protected:
    virtual void paint(QPainter *painter) Q_DECL_OVERRIDE;

private:
    PixmapContainer m_pixmapContainer;
};

#endif // PIXMAPIMAGE_H

                        pixmapimage.cpp

                        #include "pixmapimage.h"

PixmapImage::PixmapImage(QQuickItem *parent) :
    QQuickPaintedItem(parent)
{
}

void PixmapImage::setImage(QObject *pixmapContainer)
{
    PixmapContainer *pc = qobject_cast<PixmapContainer*>(pixmapContainer);
    Q_ASSERT(pc);
    m_pixmapContainer.pixmap = pc->pixmap;
    update();
}

void PixmapImage::paint(QPainter *painter)
{
    painter->drawPixmap(0, 0, width(), height(), m_pixmapContainer.pixmap);
}

                        main.cpp

                        #include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>

#include "pixmapcontainer.h"
#include "backend.h"
#include "pixmapimage.h"

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

    qmlRegisterType<PixmapContainer>("io.qt.forum", 1, 0, "PixmapContainer");
    qmlRegisterType<Backend>("io.qt.forum", 1, 0, "Backend");
    qmlRegisterType<PixmapImage>("io.qt.forum", 1, 0, "PixmapImage");

    QQmlApplicationEngine engine;
    Backend backend;
    engine.rootContext()->setContextProperty("backend", &backend);
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    return app.exec();
}

                        main.qml

                        import QtQuick 2.7
import QtQuick.Controls 1.5
import io.qt.forum 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    PixmapImage {
        id: pixmapImage
        anchors.fill: parent
    }

    Button {
        text: "Get Pixmap"
        onClicked: pixmapImage.setImage( backend.getPixmapContainer() )
    }
}
                        J Offline
                        J Offline
                        JoeMaesai
                        wrote on last edited by
                        #15

                        Thank a lot for your code example. Really appreciate.

                        1 Reply Last reply
                        0

                        • Login
                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Categories
                        • Recent
                        • Tags
                        • Popular
                        • Users
                        • Groups
                        • Search
                        • Get Qt Extensions
                        • Unsolved