如何在QML中使用QImage显示动态图像或外设推送（附示例代码）图像-CSDN博客

本文链接：https://blog.csdn.net/chenai886/article/details/149266082

在Qt中，QImage类是用于处理和表示图像数据的核心类之一。当我们需要在QML界面中显示来自外设（如摄像头、传感器或视频流）推送的动态图像时，QImage是一个非常重要的工具。通过将QImage与QQuickImageProvider结合使用，我们能够高效地处理动态图像并在QML界面中进行显示。

示例源码

通过网盘分享的文件：QML显示动态图像或推送图像帧

链接: https://pan.baidu.com/s/1ppI56izRXGvW8PIZRvbYog?pwd=jkcf 提取码: jkcf

1. 理解QImage和QQuickImageProvider

QImage类用于存储和处理图像数据。它支持多种格式，包括常见的RGB格式、灰度图像、透明图像等。与传统的图像文件不同，QImage对象存储的是图像的原始像素数据，而不是文件路径。

QQuickImageProvider则是Qt Quick中的一个类，用于创建和提供动态图像源。通过QQuickImageProvider，我们能够将图像数据暴露给QML，QML中的Image元素可以通过image://协议请求这些图像。

2. 实现动态图像显示的基本原理

为了在QML中显示来自外设的动态图像，我们可以通过以下步骤实现：

创建一个图像提供者：图像提供者类继承QQuickImageProvider，通过requestImage方法返回图像数据。
更新图像：通过QImage类更新图像数据，使用信号和槽机制将新图像传递给图像提供者。
在QML中请求图像：QML通过Image元素的source属性动态请求图像，图像提供者根据请求返回最新图像。

3. 使用`QQuickImageProvider`实现动态图像显示

以下是一个完整的示例，展示如何在QML中使用QImage显示来自外设推送的图像（如视频流或摄像头图像）。

1. 创建图像提供者类

CameraImageProvider继承自QQuickImageProvider，用于提供图像数据给QML。

#include "CameraImageProvider.h"
#include <QDebug>

CameraImageProvider::CameraImageProvider()
    : QQuickImageProvider(QQuickImageProvider::Image)
{}

void CameraImageProvider::updateImage(const QImage& image)
{
    QMutexLocker locker(&m_mutex);
    if (!image.isNull()) {
        m_image = image;
        qDebug() << "图像已更新：" << m_image.size();
    }
}

QImage CameraImageProvider::requestImage(const QString &id, QSize *size, const QSize &requestedSize)
{
    QMutexLocker locker(&m_mutex);

    if (!m_image.isNull())
        return m_image;

    QImage placeholder(100, 100, QImage::Format_RGB32);
    placeholder.fill(qRgb(128, 128, 128)); // 默认占位图
    return placeholder;
}

分析：

updateImage方法用于更新图像数据。它接受一个QImage对象并存储在成员变量m_image中。
requestImage方法根据请求的ID返回图像数据。如果图像数据为空，它返回一个灰色占位图。

2. 创建图像获取器类

ImageFetcher是一个定时器驱动的类，用于模拟从外设获取图像数据。例如，摄像头每隔一段时间会推送新的图像。

#include "ImageFetcher.h"
#include <QImage>
#include <QDebug>

ImageFetcher::ImageFetcher(QObject *parent)
    : QObject(parent), m_counter(0)
{
    m_timer = new QTimer(this);
    connect(m_timer, &QTimer::timeout, this, &ImageFetcher::fetchImage);
}

void ImageFetcher::startFetching()
{
    m_timer->start(1000); // 每秒获取一次图像
}

void ImageFetcher::fetchImage()
{
    QImage image(100, 100, QImage::Format_RGB32);
    image.fill(qRgb(m_counter * 10 % 256, 100, 50));  // 随机生成图像

    emit imageReady(image);  // 发出信号，通知图像已准备好
    m_counter++;
}

分析：

fetchImage方法每秒生成一张新的随机图像，并通过信号imageReady传递出去。
startFetching启动定时器，每隔1秒钟获取一张新的图像。

3. 主程序 - `main.cpp`

在主程序中，我们创建并初始化CameraImageProvider和ImageFetcher对象，并将它们连接起来。

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "CameraImageProvider.h"
#include "ImageFetcher.h"

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

    QQmlApplicationEngine engine;

    // 创建并注册 ImageFetcher 对象
    ImageFetcher* imageFetcher = new ImageFetcher();
    engine.rootContext()->setContextProperty("imageFetcher", imageFetcher);

    // 创建并配置图像提供者
    CameraImageProvider* imageProvider = new CameraImageProvider();
    engine.addImageProvider("camera", imageProvider);  // 注册图像提供者

    // 连接信号和槽
    QObject::connect(imageFetcher, &ImageFetcher::imageReady,
                     imageProvider, &CameraImageProvider::updateImage);

    // 加载 QML
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    // 启动图像获取
    imageFetcher->startFetching();

    return app.exec();
}

分析：

我们创建了ImageFetcher和CameraImageProvider对象，并将它们通过信号与槽连接起来。当ImageFetcher发出新的图像时，CameraImageProvider会更新图像数据。
图像提供者注册为camera，让QML通过image://camera来请求图像。

4. QML界面 - `main.qml`

QML部分负责显示图像。通过Image元素的source属性动态请求图像。

import QtQuick 2.15
import QtQuick.Controls 2.15

Window {
    visible: true
    width: 640
    height: 480
    Image {
        id: cameraImage
        width: parent.width
        height: parent.height
        source: "image://camera"
    }

    Connections {
        target: imageFetcher
        function onImageReady(image) {
            cameraImage.source = "image://camera?" + new Date().getTime();
        }
    }
}

分析：

Image元素通过source属性请求图像。source设置为image://camera，即调用我们在CameraImageProvider中注册的图像提供者。
Connections元素监听imageFetcher对象的imageReady信号，每当新的图像可用时，它会触发更新cameraImage的source，从而在界面中显示最新的图像。

4. 总结

本示例展示了如何在QML中使用QImage来处理并显示动态图像，特别是来自外设推送的图像。通过以下步骤实现：

创建图像提供者：通过继承QQuickImageProvider类，我们定义了一个自定义的图像提供者CameraImageProvider，负责处理图像的获取和更新。
图像获取器：ImageFetcher类模拟定时获取图像，并通过信号传递新的图像数据。
在QML中显示图像：通过Image元素和Connections，QML可以动态请求并显示图像。

这种方法不仅限于静态图像的展示，还适用于视频流、实时传感器数据和其他动态图像数据的处理，确保了图像显示的实时性和流畅性。同时，使用QQuickImageProvider使得图像更新与显示解耦，提升了代码的可维护性和灵活性。