red.rocket: BLOB-Abbildung aus Datenbank über AJAX-Aufruf

Hallo liebes Forum,

ich habe eine MySQL-Datenbank für einen Webshop erstellt. Neben Artikelbezeichnung etc. ist auch eine Abbildung im BLOB-Format hinterlegt.

Aus meiner HTML-Seite starte ich via JS einen AJAX-Aufruf, welcher mir bestimmte Daten aus der Datenbank ließt und wiederum an die HTML-Seite zurückschickt. Das funktioniert bisher tadelos, indem ich den Responsetext via

  
  
while($_zeile = mysql_fetch_array($_ergebnis))  
{  
         $_artikelstring .= $_zeile[0]."*";  
}  
  
echo $_artikelstring;  
  

verkette, und ihn im Javascript mittels

  
  
var data = req.responseText;  
var artikel = data.split("*");  
  

wieder aufteile.

So wie ich das verstanden habe, liegt ein BLOB-Bild aber im Binär-Format vor, und ich kann ja schlecht den gesamten Code via echo übermitteln, oder?

Die Alternative, in der Datenbank lediglich einen Link zu hinterlegen ist vorhanden, aber nicht wünschenswert.

Hat jemand eine Idee?

vielen Dank!

  1. Hi!

    Aus meiner HTML-Seite starte ich via JS einen AJAX-Aufruf, welcher mir bestimmte Daten aus der Datenbank ließt und wiederum an die HTML-Seite zurückschickt. Das funktioniert bisher tadelos, indem ich den Responsetext via * verkette [...]

    Warum nimmst du nicht JSON?

    So wie ich das verstanden habe, liegt ein BLOB-Bild aber im Binär-Format vor, und ich kann ja schlecht den gesamten Code via echo übermitteln, oder?

    Warum nicht? Es kommt darauf an, was du mit den Bilddaten im Javascript anstellen willst. Wenn du Inline-Grafiken verwenden willst, ist sowieso eine Base64-Kodierung hilfreich, und die kann problemlos wie Text übertragen werden.

    Lo!

    1. hi,

      So wie ich das verstanden habe, liegt ein BLOB-Bild aber im Binär-Format vor, und ich kann ja schlecht den gesamten Code via echo übermitteln, oder?

      Warum nicht? Es kommt darauf an, was du mit den Bilddaten im Javascript anstellen willst. Wenn du Inline-Grafiken verwenden willst, ist sowieso eine Base64-Kodierung hilfreich, und die kann problemlos wie Text übertragen werden.

      Die ist nicht nur hilfreich, sondern erforderlich, weil JS nicht mit Bytes umgehen kann (URL-Scheme nach rfc2397 im src-Attr). Base64 wird von älteren IEs nicht unterstützt und IEv8 zeigt mit Base64 auch nicht alle Bilder an. Btw., manche Browser können Inline-Imgs auch als Hexmap(binary) darstellen, das sind aber dann dreimal soviele Bytes (jedes Byte zweistellig als ASCII und Prozentzeichen davor). Also derzeit alles sehr Browserabhängig.

      Hotti

      1. Guten Morgen,

        Danke zunächst für den Hinweis mit dem JSON-Format, das kannte ich bisher nicht und ist sehr hifreich.

        Trotzdem ich das Bild jetzt Base64-codiere, funktioniert es irgendwie nicht (Das Bild wird nicht angezeigt). Meine Ajax.php sieht jetzt wie folgt aus:

          
          
        $_zeile = mysql_fetch_array($_ergebnis);  
        $_abbildung_codiert = base64_encode($_zeile['Abbildung']);  
          
        echo $_abbildung_codiert;  
        
        

        In meiner index.php steht folgendes:

          
          
        var data = req.responseText;  
        //alert(data);  
                                             document.getElementById("auswahl_div").style.display="inline";  
        document.abbildung.src = "data:image/bmp;base64,"+data;  
        
        

        Was mache ich (noch) falsch? Und ja ich weiß, JSON ist hier an dieser Stelle noch nicht umgesetzt :)

        Vielen Dank!

        1. hi,

          document.abbildung.src = "data:image/bmp;base64,"+data;

          Zeigt Dein Browser überhaupt ein 'image/bmp' an? Dann ist nochwas: Base64 kann auch den Slash enthalten der in der Verpackung mit JSON stören könnte. Hierzu ist ein zusätzliches Encoding notwendig, z.B. uri_escape (entsprechend Deiner serverseitigen Sprache), das wird mit decodeURIComponent() wieder rückgängig gemacht.

          Hotti

          1. Hi!

            Base64 kann auch den Slash enthalten der in der Verpackung mit JSON stören könnte.

            Eine JSON-Pack-Funktion sollte selbständig die Nutzdaten korrekt maskieren.

            Hierzu ist ein zusätzliches Encoding notwendig, z.B. uri_escape (entsprechend Deiner serverseitigen Sprache), das wird mit decodeURIComponent() wieder rückgängig gemacht.

            Wenn das notwendig ist, sollte man sich lieber eine ordentlich arbeitende JSON-Funktion/-Bibliothek suchen.

            Lo!

            1. Der Fehler war die Bitmap-Datei, mit JPEG geht es!
              So funktioniert es jetzt: AJAX.PHP

                
              $_zeile = mysql_fetch_array($_ergebnis);  
                
              $_abbildung_codiert = base64_encode($_zeile['Abbildung']);  
                
              $_auswahl = array(  
                       'Abbildung' => $_abbildung_codiert,  
                       'Artikelnummer' => $_zeile['Artikelnummer'] ,  
                       'EAN' => $_zeile['EAN'] ,  
                       'Bezugspreis' => $_zeile['Bezugspreis'] ,  
                       'Lagervorrat' => $_zeile['Lagervorrat']  
                       );  
                
              echo json_encode($_auswahl);  
              
              

              INDEX.PHP

                
              var auswahl = eval('(' + req.responseText + ')');  
              var abbildung = auswahl.Abbildung;  
              document.getElementById("auswahl_div").style.display="inline"  
              document.abbildung.src = "data:image/jpg;base64,"+abbildung;  
              
              

              Vielen Dank!

            2. hi,

              Hierzu ist ein zusätzliches Encoding notwendig, z.B. uri_escape (entsprechend Deiner serverseitigen Sprache), das wird mit decodeURIComponent() wieder rückgängig gemacht.

              Wenn das notwendig ist, sollte man sich lieber eine ordentlich arbeitende JSON-Funktion/-Bibliothek suchen.

              Klar. Die kochen auch nur mit Wasser ;)

              Hotti

        2. Hi!

          Trotzdem ich das Bild jetzt Base64-codiere, funktioniert es irgendwie nicht (Das Bild wird nicht angezeigt).

          Hast du Kontrollausgaben gemacht, um zu sehen, dass alles richtig ist und sich nicht irgendein ungewünschter Text eingeschmuggelt hat?

          document.abbildung.src = "data:image/bmp;base64,"+data;

          Bitmap ist aufgrund der unkomprimierten Datenmenge eigentlich nicht webgeeignet. Bist du sicher, dass du dieses Format verwenden willst (oder verwendest)? Verwendest du einen Browser, der mit Inline-Images umgehen kann? Die Fehlerkonsole sagt auch nichts?

          Lo!