Trigger QQuickImageProvider::requestImage() with parameter via button click

Question

I have a QQuickControls 2 application that displays an image using a QQuickImageProvider. Sometimes I will simply want to show an unedited image so I just implement my QML like so:

Image {
    id: image
    fillMode: Image.PreserveAspectFit
    source: "image://provider/foo/bar/placeholder.jpg"
}

Other times I will want to show an edited version of the image. How can I tell QQuickImageProvider::requestImage() I want to show an edited version?

QImage ImageProvider::requestImage(const QString &id, QSize *size, const QSize &requestedSize)
{
    // Somehow determine we need to show an editted version of the image
    if (showEdited) {
        // maybe pass query parameters to the id?
        // for eg 'image://provider/foo/bar/i.jpg?edit=true'
        // Then I parse the id string for this query parameter?

        cv::Mat src = cv::imread(id.toStdString());

        // ... perform some image processing to the image

        QImage img = convertMatToQImage(src);

        if (size)
            *size = QSize(img.width(), img.height());

        return img;
    }
    else {
        QImage img(id);

        if (size)
            *size = QSize(img.width(), img.height());

        return img;
    }
}

The trigger to show the edited image is by clicking a button:

Button {
    id: processBtn
    text: qsTr("Process")
    onClicked: {
        // Somehow call QQuickImageProvider::requestImage() and specify we are editting it?
        // Maybe...
        // image.source = image.source + "?edit=true"   
    }
}

pass id, for example as image or image-edited and parse it inside requestImage() or, that would be right, create 2 image providers and use that you need. — folibis

eyllanesc eyllanesc · Accepted Answer · 2018-10-22T14:34:46

I could pass the url of the image, and use the QUrl class to get that edit=true as I show below:

QImage ImageProvider::requestImage(const QString &id, QSize *size, const QSize &requestedSize)
{
    Q_UNUSED(requestedSize)
    QUrl url(id);
    bool showEdited = url.query() == "edit=true";
    if (showEdited) {
        cv::Mat src = cv::imread(url.toLocalFile().toStdString());
        
        ///begin process
        cv::GaussianBlur(src, src, cv::Size(3,3), 0, 0, cv::BORDER_DEFAULT );
        cv::Mat grad_x, grad_y;
        cv::Mat abs_grad_x, abs_grad_y, src_gray, grad;
        int scale = 1;
        int delta = 0;
        int ddepth = CV_16S;
        cv::cvtColor( src, src_gray, CV_BGR2GRAY );
        /// Gradient X
        cv::Sobel( src_gray, grad_x, ddepth, 1, 0, 3, scale, delta, cv::BORDER_DEFAULT );
        /// Gradient Y
        cv::Sobel( src_gray, grad_y, ddepth, 0, 1, 3, scale, delta, cv::BORDER_DEFAULT );
        convertScaleAbs( grad_x, abs_grad_x );
        convertScaleAbs( grad_y, abs_grad_y );
        addWeighted( abs_grad_x, 0.5, abs_grad_y, 0.5, 0, grad );
        ///end process
        QImage img = convertMatToQImage(grad);
        if (size)
            *size = QSize(img.width(), img.height());
        return img;
    }
    else {
        QImage img(url.toLocalFile());
        if (size)
            *size = QSize(img.width(), img.height());
        return img;
    }
}

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.11
import QtQuick.Dialogs 1.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    property string path: ""
    onPathChanged: image.source = path == "" ? "": "image://provider/"+ path
    ColumnLayout {
        anchors.fill: parent
        Image {
            id: image
            Layout.preferredWidth: parent.width
            Layout.preferredHeight: parent.height * 0.8
            fillMode: Image.PreserveAspectFit
        }
        Pane {
            id: pane
            Layout.fillWidth: true
            RowLayout {
                width: parent.width
                Button {
                    id: selectBtn
                    text: qsTr("Select")
                    Layout.alignment: Qt.AlignHCenter
                    onClicked: fileDialog.open();
                }
                Button {
                    id: processBtn
                    text: qsTr("Process")
                    Layout.alignment: Qt.AlignHCenter
                    onClicked: if(path != "")  image.source = "image://provider/"+ path + "?edit=true"
                }
            }
        }
    }
    FileDialog {
        id: fileDialog
        title: "Please choose a file"
        folder: shortcuts.home
        nameFilters: [ "Image files (*.jpg *.png)", "All files (*)" ]
        onAccepted:  path = fileDialog.fileUrl
    }
}

Original:

Process:

_{The complete example can be found on this link.}

Trigger QQuickImageProvider::requestImage() with parameter via button click

2 Answers