Display Two Different Images in Two Different Image Controls using Image Provider in QT5

Question

I have a Project Which displys image clicked by IP Camera it is Displying image unsing image Provider class and in Image Control now what i want is to click 2 images and disply that two images in two Different IMAGE CONTROL i am new to qt and i have tried many ways but get no sucess my current code is as below

For Registering image Provider

 engine.addImageProvider(QLatin1String("capturedImage"), capturedImageProvider);

Image Provider is written like below #include #include "imageProvider.h"

ImageProvider::ImageProvider(QObject *parent) : 
QQuickImageProvider(QQmlImageProviderBase::Image)
{

}

QImage ImageProvider::requestImage(const QString &id, QSize *size, const QSize& 
requestedSize)
{
    QImageReader reader("output.png");
    //QImageReader reader(id);
    QImage newImage = reader.read();
    return newImage;
}

in qml i have written like below

 onUpdateCapturedImage: {
        fmImage.source = "image://capturedImage?id=" + Math.random()
        
        fmImage2.source = "image://capturedImage?id=" + Math.random()
        
        btCapture.enabled = true
        pin.visible = false
        btCancel.visible = false
        btCapture.visible =true
        lbFileName.visible = false
        tmUpdateProgress.stop()
        if(status) {
            lbFileName.text = fileName;
        }

Here fmImage and fmImage2 is IMAGE CONTROLS CURRENTLY both controls display same image i want them to disply different images how can i do that please someone explain me with small example

Answer 1

The way to specify which image to display is in the ID field. Currently, you are passing Math.random() as an ID, and then ignoring it in your requestImage function. But if you change that so that the ID is meaningful, you can decide which image to return.

onUpdateCapturedImage: {
    fmImage.source = "image://capturedImage?id=" + firstId
    fmImage2.source = "image://capturedImage?id=" + secondId
}

QImage ImageProvider::requestImage(const QString &id, QSize *size, const QSize& 
requestedSize)
{
    QImageReader reader;

    if (id == firstId)
    {
        reader.setFileName("output1.png");
    }
    else if (id == secondId)
    {
        reader.setFileName("output2.png");
    }
    else
    {
        // Unknown image
    }

    QImage newImage = reader.read();
    return newImage;
}