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

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"
}
}

Answer 1

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.

Answer 2

Use id without extension something like that:
Button {
property bool edit: false
onClicked: {
image.source = "image:://provider/foo/path" + (edit ? placeholder-edit : placeholder )
}
}
But you can implement you QQuickPaintedItem with custom properties without image provider