Verwendung von JavaScript zur Anzeige eines Blob

Question

Ich rufe ein Blob-Bild aus einer Datenbank ab und möchte dieses Bild gerne mit JavaScript anzeigen können. Der folgende Code erzeugt ein Symbol für ein fehlerhaftes Bild auf der Seite:

var image = document.createElement('image');
    image.src = 'data:image/bmp;base64,'+Base64.encode(blob);
    document.body.appendChild(image);

Hier ist ein jsFiddle, das den gesamten erforderlichen Code enthält, einschließlich des Blobs. Der fertige Code sollte das Bild ordnungsgemäß anzeigen.

Answer 1

Im Fiddle ist dein Blob keine Blob. Es handelt sich um eine Zeichenfolge, die hexadezimale Daten repräsentiert. Versuche es mit einem Blob und du bist fertig

var image = document.createElement('img');
let reader=new FileReader()
reader.addEventListener('loadend',()=>{
  let contents=reader.result
  image.src = contents
  document.body.appendChild(image);
})
if(blob instanceof Blob) reader.readAsDataURL(blob)

readAsDataURL gibt Ihnen ein base64-codiertes Bild, das bereit für das Bildelement ()-Quelle (src) ist

Answer 2

Das Problem war, dass ich hexadezimale Daten hatte, die in Binär umgewandelt werden mussten, bevor sie base64codiert wurden.

In PHP:

base64_encode(pack("H*", $subvalue))