Base64 string to QPixmap

[CloudL]

Hi friends,

i try to convert a base64 encoded image (string) into a QPixmap.

The base64 image string is in a sqlite database in a TEXT column.

I do something like this:

SQL:

PRAGMA encoding="UTF-8";

DROP TABLE IF EXISTS user;
CREATE TABLE user(
id VARCHAR(48) PRIMARY KEY,
avatar TEXT,
...

Then requesting the avatar:
SELECT avatar FROM user ....

    const QString& base64ImageString(query.value(0).toString());

// base64ImageString looks like :   
// "data:image/png;base64,/9j/4AA.........cY3Z/9k="
// If i put this string in an online converter the image gets shown. so the string is correct

    QPixmap ret;
    if(!ret.loadFromData(QByteArray::fromBase64(base64ImageString.toUtf8().toBase64()))) {
        qCritical() << "getPilotAvatar: couldn't create png image from db binary data.";
        return defaultAvatar;
    }

ret.loadFromData always fails....

Any ideas?

Greetings
Nando

[JonB]

@CloudL said in Base64 string to QPixmap:

if(!ret.loadFromData(QByteArray::fromBase64(base64ImageString.toUtf8().toBase64()))) {

Since you have a problem here, start by breaking it into parts. You want to find out what QByteArray::fromBase64(base64ImageString.toUtf8().toBase64()) returns, i.e. is it a valid and sensible QByteArray?

"data:image/png;base64,/9j/4AA.........cY3Z/9k="

From my limited knowledge, this does not look like any Base64 string. It may have a Base64 string inside it, say from the base64 marker onward, but the start is not a Base64 string. It's some sort of image format, announcing it's a base64-encoded png file.

// If i put this string in an online converter the image gets shown. so the string is correct

That will not be a Base64 string converter. It will be an image converter, which understands the leading data:... stuff.

[SGaist]

Hi,

@CloudL said in Base64 string to QPixmap:

ret.loadFromData(QByteArray::fromBase64(base64ImageString.toUtf8().toBase64()))

Aren't you doing a double conversion here ? Your base64ImageString variable is likely already containing base64 data. If that's not the case, then you have a naming issue.

As an additional note, why are you converting your database data to a QString to then make it a QByteArray again ?

[CloudL]

@SGaist said in Base64 string to QPixmap:

As an additional note, why are you converting your database data to a QString to then make it a QByteArray again

Hi,
thanks for your help.

I get the data from a server inside a json message.
Then i save the base64 string from the json message into my local database.

Later i want to load the data from my local database and display the pixmap...

Now i tried the following but still not working:

const QByteArray& base64ImageString(query.value(0).toByteArray());

QPixmap ret;
if(!ret.loadFromData(base64ImageString)) {
    qCritical() << "getPilotAvatar: couldn't create png image from db binary data.";
     return defaultAvatar;
}

[eyllanesc]

@CloudL what is the output of qDebug() << base64ImageString;

[CloudL]

@eyllanesc
The output is:

"data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAQCAw.........mYiTApS0RcY3Z/9k="

[SGaist]

So you are saving the html content in your database not the base64 encoded image. That's is your first issue. Drop the stuff up to the and including base64,. This is information of the img tag.

[eyllanesc]

@CloudL said in Base64 string to QPixmap:

data:image/png;base64,

Then remove "data:image/png;base64,".

[CloudL]

@eyllanesc said in Base64 string to QPixmap:

still not working ...

    QByteArray base64ImageString(query.value(0).toByteArray());

    base64ImageString = base64ImageString.remove(0, 22);

    //base64ImageString = base64ImageString.replace("data:image/png;base64,", "");

    qInfo() << base64ImageString;


    QPixmap ret;
    if(!ret.loadFromData(base64ImageString, "PNG")) {
        qCritical() << "getPilotAvatar: couldn't create png image from db binary data.";
        return defaultAvatar;
    }

[eyllanesc]

@CloudL Your string is not base64 of a png, if so then it should start with "iVBO". I think you have not saved the image in base64.

[CloudL]

@eyllanesc

You are right. It was no png. Now i changed it, but still not working...

data looks like:

"iVBORw0KGgoAAAANSUhEUgAAANwAAADcCAYAAAAbWs+BAAAAAXNSR0IArs4c6QAAIABJREFUeF7tfQmYHFW1/zlVM5OQbdj3RZZMVycPENw3NkUQ3IFJV4dFUPNkCemaAKK8p8HtPYF0dQjiH1FRJF3NuAPi9gSfPjdkE0m6OgFRCQRQhIQEkpmpOv/v9nRParnVtXT1Pvf7+Pgyfe+55557T917zz3ndxCmy7QEpiXQNAlg03qa7qimBGj0LFF/Ze9d+3aZuc/E.........."

    QByteArray base64ImageString(query.value(0).toByteArray());

   // base64ImageString = base64ImageString.remove(0, 22);

    base64ImageString = base64ImageString.replace("data:image/png;base64,", "");

    qInfo() << base64ImageString;


    QPixmap ret;
    if(!ret.loadFromData(base64ImageString, "PNG")) {
        qCritical() << "getPilotAvatar: couldn't create png image from db binary data.";
        return defaultAvatar;
    }

Sorry, i have no more ideas...

By the way. In your profile your e-mail is wrong i think.. It should be gmail ? not gmal... ?

[eyllanesc]

@CloudL change to:

QByteArray data(query.value(0).toByteArray());
QByteArray base64 = data.replace(QByteArray("data:image/png;base64,"), QByteArray(""));
QByteArray rawImage = QByteArray::fromBase64(base64);

QPixmap ret;
if(!ret.loadFromData(rawImage, "PNG")) {

}

[CloudL]

It works!! Thank you!! You saved my day :)

QByteArray rawImage = QByteArray::fromBase64(base64);

I think this was the main missing part...