Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Base64 string to QPixmap
QtWS25 Last Chance

Base64 string to QPixmap

Scheduled Pinned Locked Moved Solved General and Desktop
13 Posts 4 Posters 1.5k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • C Offline
    C Offline
    CloudL
    wrote on 27 Aug 2021, 10:53 last edited by
    #1

    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

    J 1 Reply Last reply 27 Aug 2021, 11:07
    0
    • C CloudL
      27 Aug 2021, 10:53

      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

      J Offline
      J Offline
      JonB
      wrote on 27 Aug 2021, 11:07 last edited by
      #2

      @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.

      1 Reply Last reply
      0
      • S Offline
        S Offline
        SGaist
        Lifetime Qt Champion
        wrote on 27 Aug 2021, 11:20 last edited by
        #3

        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 ?

        Interested in AI ? www.idiap.ch
        Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

        C 1 Reply Last reply 27 Aug 2021, 11:26
        0
        • S SGaist
          27 Aug 2021, 11:20

          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 ?

          C Offline
          C Offline
          CloudL
          wrote on 27 Aug 2021, 11:26 last edited by CloudL
          #4

          @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;
          }
          
          
          eyllanescE 1 Reply Last reply 27 Aug 2021, 11:31
          0
          • C CloudL
            27 Aug 2021, 11:26

            @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;
            }
            
            
            eyllanescE Offline
            eyllanescE Offline
            eyllanesc
            wrote on 27 Aug 2021, 11:31 last edited by
            #5

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

            If you want me to help you develop some work then you can write to my email: e.yllanescucho@gmal.com.

            C 1 Reply Last reply 27 Aug 2021, 11:40
            0
            • eyllanescE eyllanesc
              27 Aug 2021, 11:31

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

              C Offline
              C Offline
              CloudL
              wrote on 27 Aug 2021, 11:40 last edited by
              #6

              @eyllanesc
              The output is:

              "data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAQCAw.........mYiTApS0RcY3Z/9k="
              
              eyllanescE 1 Reply Last reply 27 Aug 2021, 11:49
              0
              • S Offline
                S Offline
                SGaist
                Lifetime Qt Champion
                wrote on 27 Aug 2021, 11:44 last edited by
                #7

                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.

                Interested in AI ? www.idiap.ch
                Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                1 Reply Last reply
                0
                • C CloudL
                  27 Aug 2021, 11:40

                  @eyllanesc
                  The output is:

                  "data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAQCAw.........mYiTApS0RcY3Z/9k="
                  
                  eyllanescE Offline
                  eyllanescE Offline
                  eyllanesc
                  wrote on 27 Aug 2021, 11:49 last edited by
                  #8

                  @CloudL said in Base64 string to QPixmap:

                  data:image/png;base64,

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

                  If you want me to help you develop some work then you can write to my email: e.yllanescucho@gmal.com.

                  1 Reply Last reply
                  0
                  • C Offline
                    C Offline
                    CloudL
                    wrote on 27 Aug 2021, 11:57 last edited by
                    #9

                    @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;
                        }
                    
                    eyllanescE 1 Reply Last reply 27 Aug 2021, 12:10
                    0
                    • C CloudL
                      27 Aug 2021, 11:57

                      @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;
                          }
                      
                      eyllanescE Offline
                      eyllanescE Offline
                      eyllanesc
                      wrote on 27 Aug 2021, 12:10 last edited by
                      #10

                      @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.

                      If you want me to help you develop some work then you can write to my email: e.yllanescucho@gmal.com.

                      C 1 Reply Last reply 27 Aug 2021, 12:32
                      0
                      • eyllanescE eyllanesc
                        27 Aug 2021, 12:10

                        @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.

                        C Offline
                        C Offline
                        CloudL
                        wrote on 27 Aug 2021, 12:32 last edited by CloudL
                        #11

                        @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... ?

                        eyllanescE 1 Reply Last reply 27 Aug 2021, 12:39
                        0
                        • C CloudL
                          27 Aug 2021, 12:32

                          @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... ?

                          eyllanescE Offline
                          eyllanescE Offline
                          eyllanesc
                          wrote on 27 Aug 2021, 12:39 last edited by eyllanesc
                          #12

                          @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")) {
                          
                          }
                          

                          If you want me to help you develop some work then you can write to my email: e.yllanescucho@gmal.com.

                          1 Reply Last reply
                          1
                          • C Offline
                            C Offline
                            CloudL
                            wrote on 27 Aug 2021, 13:02 last edited by
                            #13

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

                            QByteArray rawImage = QByteArray::fromBase64(base64);
                            

                            I think this was the main missing part...

                            1 Reply Last reply
                            0

                            1/13

                            27 Aug 2021, 10:53

                            • Login

                            • Login or register to search.
                            1 out of 13
                            • First post
                              1/13
                              Last post
                            0
                            • Categories
                            • Recent
                            • Tags
                            • Popular
                            • Users
                            • Groups
                            • Search
                            • Get Qt Extensions
                            • Unsolved