Failed to get image from provider

gabor53

Hi,
I plan to get an image from QQuickImageProvider and display it in QML. I have the following files:
main.qml:

import Felgo 3.0
import QtQuick 2.11
import QtQuick 2.5
import VPlayApps 1.0
import QtQuick.Dialogs 1.2

App {
    id: app

    NavigationStack {

        Page {
            title: qsTr("Image Converter")

            IconButton {
                id: enlarge
                visible: false
                color: "blue"
                icon: IconType.arrowsalt
                anchors.baseline: button.baseline
                anchors.right: button.left

                onClicked: {
                    PictureViewer.show(app, image.source)
                }
            }

            AppButton {
                id: button

                anchors.horizontalCenter: imageViewer.horizontalCenter
                anchors.bottom: imageViewer.top
                text: "Choose Image"
                onClicked: {
                    //                    nativeUtils.displayImagePicker("Choose the Friend's Image")
                    fileDialog.visible = true
                }
            }

            Rectangle {
                id: imageViewer
                width: 250
                height: 250
                anchors.centerIn: parent

                AppImage {
                    id: image
                    onStatusChanged: if (image.status == Image.Ready)
                                         enlarge.visible = true
                    anchors.fill: parent
                    width: 250
                    height: 250
                    autoTransform: true
                    fillMode: Image.PreserveAspectFit
                }
            }

            FileDialog {
                id: fileDialog
                title: "Please choose the image."
                selectMultiple: false

                onAccepted: {
                    console.log("The chosen file: " + fileDialog.fileUrl)
                    var id
                    id = fileDialog.fileUrl
                    image.source = "image://pix/" + fileDialog.fileUrl
                }
            }
        }
    }
}

makepix.cpp:

#include "makepix.h"
#include <QDebug>
#include <QPixmap>

QPixmap MakePix::requestPixmap(const QString& id, QSize* size, const QSize& requestedSize)
{

	QPixmap pixmap(id);

	qDebug() << "MakePix requestPixmap id: " << id;

	if(pixmap.isNull() == true)
	{
		qDebug() << "There is no QPixmap in MakePix.";
	}
	else
	{
		qDebug() << "There is a QPixmap in MakePix.";
	}

	QPixmap result;

	if(requestedSize.isValid())
	{
		result = pixmap.scaled(requestedSize, Qt::KeepAspectRatio);
	}
	else
	{
		result = pixmap;
	}
	*size = result.size();
	return result;
}

makepix.h:

#ifndef MAKEPIX_H
#define MAKEPIX_H

#include <QObject>
#include <QQuickImageProvider>
#include <QString>

class MakePix : public QObject, public QQuickImageProvider
{
	Q_OBJECT
public:
	MakePix()
		: QQuickImageProvider(QQuickImageProvider::Pixmap)
	{}

	QPixmap requestPixmap(const QString& id, QSize* size, const QSize& requestedSize) override;
};

#endif // MAKEPIX_H

main.cpp:

#include "makepix.h"
#include <FelgoApplication>
#include <QApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QQuickView>

int main(int argc, char* argv[])
{
	QApplication app(argc, argv);
	FelgoApplication felgo;

	felgo.setPreservePlatformFonts(true);

	QQmlApplicationEngine engine;
	felgo.initialize(&engine);

	felgo.setMainQmlFileName(QStringLiteral("qml/Main.qml"));

	MakePix* myMakePix = new MakePix();

	engine.addImageProvider("pix", myMakePix);

	engine.load(QUrl(felgo.mainQmlFileName()));

	return app.exec();
}
*
*```
It compiles without an error, but when I run it I get the following error message:
"*qml: The chosen file: file:///C:/Users/gabor/Pictures/133CANON/IMG_3344.JPG
MakePix requestPixmap id:  "file:///C:/Users/gabor/Pictures/133CANON/IMG_3344.JPG"
There is no QPixmap in MakePix.
file:///C:/Programming/Android/Samples/ImageConverter/trunk/build-ImageConvert-Felgo_Desktop_Qt_5_11_1_MinGW-Debug/qml/Main.qml:46:17: QML AppImage: Failed to get image from provider: image://pix/file:///C:/Users/gabor/Pictures/133CANON/IMG_3344.JPG*"

Please help me to figure out why I don't have a pixmap in QQuickImageProvider. Thank you.

SGaist

Hi,

Did you check the id parameter content before just blindingly loading it ?

gabor53

@SGaist ,
Yes. According to qDebug the content is

MakePix requestPixmap id:  "file:///C:/Users/gabor/Pictures/133CANON/IMG_3344.jpg
``

mrjj

Hi
The path seems wrong
image://pix/file:///C:/Users/gabor/Pictures/133CANON/IMG_3344.JPG

Why do you both add the image provider id (pix) and at the same time
give it a fully qualified path to a file?

This seems wrong to me ?
image.source = "image://pix/" + fileDialog.fileUrl

should it just not be ?
image.source = fileDialog.fileUrl

gabor53

Hi @mrjj ,
I am trying to use the image provider that's why I used

image.source = "image://pix/" + fileDialog.fileUrl
``
I am trying to create a pixmap and use QML to save it to localstorage.

mrjj

@gabor53
Hi
Ok, but are you sure the QQuickImageProvider should be involved in the
saving of the image?
The syntax "image://pix/" seems for loading only, docs mention nothing about saving.
Anyway, i was just wondering.

sierdzio

@gabor53 said in Failed to get image from provider:

@SGaist ,
Yes. According to qDebug the content is
MakePix requestPixmap id:  "file:///C:/Users/gabor/Pictures/133CANON/IMG_3344.jpg
``

You need to remove file:/// from that URL, otherwise QPixmap won't handle it.

As others note, however - it seems you don't need an image provider here at all. QML can handle JPG images out of the box.

gabor53

Hi @sierdzio ,
It is true, but how can I save the jpg to localstorage?
Thank you.

sierdzio

You mean you want to take the jpg from one location and save it in another? Use QFile::copy().

gabor53

@sierdzio
I want to save the actual image to a db.

gabor53

@mrjj,
The goal is to save the actual jpg into Qt Quick Local Storage. To do that I need to create a Blob from the jpg file. I don't think it is possible to do in QML; that's why I use QQuickImageProvider to send the image from QML to C++ and return a pixmap to QML.
If I copy 1.jpg to the qml folder and pass1.jpg to QQuickImageProvider the image is correctly displayed, which means the path I get from fileDialog.fileUrl is incorrect.
How can I fix the path so fileDialog.fileUrl provides the right path to the image?
Thank you.

SGaist

@sierdzio already answered that question.

mrjj

hi
so you get a pixmap back to QML but how do you then convert it to the blob?
As far as i understand, Qt Quick Local Storage is a sqllite database so
you need it as QbyteArray to save it.

gabor53

@mrjj
Is there a way to convert pixmap into blob in QML?

mrjj

@gabor53
Hi
sadly i dont know QML well enough to answer that.
It seems it get converted to ArrayBuffer if used in signals.
from c++ to QML.
but im not sure how you can get the pixmap into that.

SGaist

Did you already check Qt Quick Local Storage QML Types ?

By the way, why do you want to store images there ?

gabor53

@SGaist ,
I checked Local Storage QML Types but it doesn't really talk about images.
I'm creating a small app where I can store an image and a description of the image. I used to do it by storing only the url, but eventually the images got moved and I ended up with a bunch of broken links.

SGaist

In that case, I would rather go with a more classical approach through C++ especially if you want to recover the images.

gabor53

@SGaist
Thank you. I will do it that way.