QT5中使用Image Provider实现双Image控件显示不同图像

问题根源 #

当前你的ImageProvider不管传入的id是什么，都固定读取output.png文件，所以两个Image控件请求到的必然是同一张图。要实现分别显示两张拍摄图像，需要让ImageProvider能根据不同的id返回对应的图像。

步骤1：修改ImageProvider类，支持多图像存储与读取 #

更新头文件 imageProvider.h

#ifndef IMAGEPROVIDER_H
#define IMAGEPROVIDER_H

#include <QQuickImageProvider>
#include <QImage>
#include <QMap>

class ImageProvider : public QQuickImageProvider
{
    Q_OBJECT
public:
    explicit ImageProvider(QObject *parent = nullptr);

    // 重写图像请求方法
    QImage requestImage(const QString &id, QSize *size, const QSize &requestedSize) override;

    // 对外提供设置图像的接口，用于保存拍摄的图像
    void setCapturedImage(const QString &imageId, const QImage &image);

private:
    // 用Map存储不同id对应的拍摄图像
    QMap<QString, QImage> m_capturedImages;
};

#endif // IMAGEPROVIDER_H

实现cpp文件 imageProvider.cpp

#include "imageProvider.h"

ImageProvider::ImageProvider(QObject *parent)
    : QQuickImageProvider(QQmlImageProviderBase::Image, QQuickImageProvider::ForceAsynchronousImageLoading)
{
}

QImage ImageProvider::requestImage(const QString &id, QSize *size, const QSize &requestedSize)
{
    // 根据id从Map中匹配对应图像
    if (m_capturedImages.contains(id)) {
        QImage targetImage = m_capturedImages[id];
        if (size) {
            *size = targetImage.size();
        }
        // 按请求尺寸缩放图像（保持比例）
        if (requestedSize.isValid()) {
            return targetImage.scaled(requestedSize, Qt::KeepAspectRatio);
        }
        return targetImage;
    }
    // 无匹配id时返回空图（或自定义占位图）
    return QImage();
}

void ImageProvider::setCapturedImage(const QString &imageId, const QImage &image)
{
    m_capturedImages[imageId] = image;
}

步骤2：在拍摄逻辑中保存两张图像到ImageProvider #

假设你有从IP摄像头获取图像的代码，拍摄时分别将两张图存入ImageProvider：

// 拍摄第一张图像，替换成你实际的摄像头采集逻辑
QImage capturedImage1 = getImageFromIPCamera();
capturedImageProvider->setCapturedImage("cam1", capturedImage1);

// 拍摄第二张图像
QImage capturedImage2 = getImageFromIPCamera();
capturedImageProvider->setCapturedImage("cam2", capturedImage2);

步骤3：修改QML代码，指定不同id请求图像 #

将原来的随机id替换为固定标识，确保每个Image控件请求对应图像：

onUpdateCapturedImage: {
    // 请求第一张拍摄图像
    fmImage.source = "image://capturedImage/cam1"
    // 请求第二张拍摄图像
    fmImage2.source = "image://capturedImage/cam2"
    
    btCapture.enabled = true
    pin.visible = false
    btCancel.visible = false
    btCapture.visible = true
    lbFileName.visible = false
    tmUpdateProgress.stop()
    if(status) {
        lbFileName.text = fileName;
    }
}

额外提示 #

• 如果需要重新拍摄刷新图像，只需调用setCapturedImage更新对应id的图像，再给QML的source加随机数后缀强制刷新缓存，比如："image://capturedImage/cam1?" + Math.random()
• 可以根据需求自定义id命名规则，只要保证每个图像对应唯一id即可

内容的提问来源于stack exchange，提问作者user3269550