QML实时加载图片的三种方法（QQuickImageProvider，QQuickPaintedItem，QQuickItem）

1. 缓存刷新方法，继承QQuickImageProvider

#include <QQuickImageProvider>
#include <QImage>
 
class ImageProvider : public QQuickImageProvider
{
public:
    ImageProvider();
 
    QImage requestImage(const QString &id, QSize *size, const QSize& requestedSize);
    QPixmap requestPixmap(const QString &id, QSize *size, const QSize& requestedSize);
 
    void setImageRc(const QImage &image);
private:
    QImage img;
};

#include "imageprovider.h"
#include <QDebug>
 
ImageProvider::ImageProvider() : QQuickImageProvider(QQuickImageProvider::Image)
{
 
}
 
QImage ImageProvider::requestImage(const QString &id, QSize *size, const QSize &requestedSize)
{
//    qDebug()<<"ImageProvider requestImage"<<id<<size<<requestedSize;
    return img;
}
 
QPixmap ImageProvider::requestPixmap(const QString &id, QSize *size, const QSize &requestedSize)
{
//    qDebug()<<"ImageProvider requestPixmap";
    return QPixmap::fromImage(img);
}
 
void ImageProvider::setImageRc(const QImage &image)
{
    img = image;
}

然后在自己写一个类在qml中引用，并实时触发刷新信号。

show.h

#include <QObject>
#include "imageprovider.h"
 
class ShowImg : public QObject
{
    Q_OBJECT
public:
    explicit ShowImg(QObject *parent = nullptr);
 
    ImageProvider *m_pImgProvider;
 
signals:
    void callQmlRefreshImg();
 
public slots:
    void setImageSlot(const QImage &image);
};

ShowImg.cpp

#include "showimg.h"
#include <QDebug>
 
ShowImg::ShowImg(QObject *parent) : QObject(parent)
{
    m_pImgProvider = new ImageProvider();
}
 
void ShowImg::setImageSlot(const QImage &image)
{
    m_pImgProvider->setImageRc(image);
    emit callQmlRefreshImg();
}

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "showimg.h"
 
 
ShowImg *CodeImage;
int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
 
    QGuiApplication app(argc, argv);
 
    QQmlApplicationEngine engine;
 
    CodeImage = new ShowImg();
    engine.rootContext()->setContextProperty("CodeImage", CodeImage);
    engine.addImageProvider(QLatin1String("CodeImg"), CodeImage->m_pImgProvider);
 
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);
 
    return app.exec();
}

text.qml

import QtQuick 2.12
import QtQuick.Controls 2.5
 
Rectangle {
    id: rectangle
    anchors.fill: parent
    BorderImage {
        id: borderImage
        transformOrigin: Item.Center
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        cache: false
        source: "Image/background.png"
    }
    Connections{
        target: CodeImage
        onCallQmlRefreshImg:{
            borderImage.source = ""
            borderImage.source = "image://CodeImg"
        }
    }
}

这种方式我认为是最笨重的，代码量大，而且运行是一段时间程序容易Crash（在ios平台下），安卓和桌面端正常。

2. 继承QQuickPaintedItem

PaintItem.h

#include <QQuickPaintedItem>
#include <QImage>
#include <QPainter>
 
class PaintItem : public QQuickPaintedItem
{
    Q_OBJECT
public:
    explicit PaintItem(QQuickItem *parent = nullptr);
 
public slots:
    void updateImage(const QImage &);
 
protected:
    void paint(QPainter *painter);
 
private:
    QImage m_imageThumb;
};

PaintItem.cpp

#include "paintitem.h"
 
PaintItem::PaintItem(QQuickItem *parent) : QQuickItem(parent)
{
    //默认图片
    m_imageThumb = QImage(":/Image/background.png");
}
 
void PaintItem::updateImage(const QImage &image)
{
    m_imageThumb = image;
    update();
}
 
void PaintItem::paint(QPainter *painter)
{
    painter->drawImage(this->boundingRect(), m_imageThumb);
}

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "paintitem.h"
 
int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
 
    QGuiApplication app(argc, argv);
 
    //注册类
    qmlRegisterType<PaintItem>("PaintItemModule",1,0,"PaintItem");
 
    QQmlApplicationEngine engine;
 
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);
 
    return app.exec();
}

text.qml

import QtQuick 2.12
import QtQuick.Controls 2.5
import PaintItemModule 1.0
 
Rectangle {
    id: rectangle
    anchors.fill: parent
 
    PaintItem {
        id: paintItem
        transformOrigin: Item.Center
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
    }
}

这种方式代码简单，经测试在安卓和桌面端运行正常，速度比较快，同样在iOS下绘制速度上不去，大概在10帧左右，如果不是在ios平台这种方法就可以啦。

3. 继承QQuickItem重写updatePaintNode

PaintItem.h

#include <QQuickItem>
#include <QSGNode>
#include <QSGSimpleRectNode>
#include <QSGSimpleTextureNode>
#include <QQuickWindow>
#include <QImage>
 
class PaintItem : public QQuickItem
{
    Q_OBJECT
public:
    explicit PaintItem(QQuickItem *parent = nullptr);
 
public slots:
    void updateImage(const QImage &);
 
protected:
    QSGNode * updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *) override;
 
private:
    QImage m_imageThumb;
};

PaintItem.cpp

#include "paintitem.h"
 
PaintItem::PaintItem(QQuickItem *parent) : QQuickItem(parent)
{
    //这句不加会报错
    setFlag(ItemHasContents, true);
    //默认图片
    m_imageThumb = QImage(":/Image/background.png");
}
 
void PaintItem::updateImage(const QImage &image)
{
    m_imageThumb = image;
    update();
}
 
QSGNode * PaintItem::updatePaintNode(QSGNode *oldNode, QQuickItem::UpdatePaintNodeData *)
{
    auto node = dynamic_cast<QSGSimpleTextureNode *>(oldNode);
 
    if(!node){
        node = new QSGSimpleTextureNode();
    }
 
    QSGTexture *m_texture = window()->createTextureFromImage(m_imageThumb, QQuickWindow::TextureIsOpaque);
    node->setOwnsTexture(true);
    node->setRect(boundingRect());
    node->markDirty(QSGNode::DirtyForceUpdate);
    node->setTexture(m_texture);
 
    return node;
}

main.cpp和qml跟第二种一样，这里就不写了。

总结：第一种是最臃肿和最危险的，容易Crash，虽然我只在ios下复现过，我感觉在安卓和桌面端也有类似危险。第二种代码很简洁，正常来讲在安卓和桌面端都能满足60帧左右应该问题不大。追求极致就选第三种吧，2和3都是场景渲染的方法只不过2比3内部多封装了些东西渲染多了些步骤所以效率没有3高，3更灵活更高效，都是用的GPU而不是CPU，不对导致你的程序卡顿，CPU爆炸。想具体了解的话可以参考几个大佬的文章QtQuick基础教程（四）---场景渲染(Scene Graph)，玩转QtQuick(1)-SceneGraph场景图简介 

补充--------------------------------------------

如果是接受流数据做实时显示的话用这种方法最为流畅，亲测，QML VideoOutput 显示 YUV420P 数据流

转自：QML实时加载图片的三种方法（QQuickImageProvider，QQuickPaintedItem，QQuickItem）_qml 显示图片-CSDN博客