Verwenden von JavaScript zum Anzeigen eines Blobs

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

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

Hier ist eine jsFiddle, die den gesamten erforderlichen Code enthält, einschließlich des Blobs. Der ausgefüllte Code sollte ein Bild korrekt anzeigen.

Sie können das BLOB-Objekt auch direkt von XMLHttpRequest abrufen. Das Setzen von responseType auf blob macht den Trick. Hier ist mein Code:

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost/image.jpg");
xhr.responseType = "blob";
xhr.onload = response;
xhr.send();

Und die Antwortfunktion sieht folgendermaßen aus:

function response(e) {
   var urlCreator = window.URL || window.webkitURL;
   var imageUrl = urlCreator.createObjectURL(this.response);
   document.querySelector("#image").src = imageUrl;
}

Wir müssen nur ein leeres Bildelement in HTML erstellen:

<img id="image"/>

Wenn Sie stattdessen fetch verwenden möchten:

var myImage = document.querySelector('img');

fetch('flowers.jpg').then(function(response) {
  return response.blob();
}).then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

Quelle:

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Sie können Ihre Zeichenfolge in ein Uint8Array konvertieren , um die Rohdaten abzurufen . Erstellen Sie dann einen Blob für diese Daten und übergeben Sie ihn an URL.createObjectURL (Blob) , um den Blob in eine URL zu konvertieren, die Sie an img.src übergeben .

var data = '424D5E070000000000003E00000028000000EF...';

// Convert the string to bytes
var bytes = new Uint8Array(data.length / 2);

for (var i = 0; i < data.length; i += 2) {
    bytes[i / 2] = parseInt(data.substring(i, i + 2), /* base = */ 16);
}

// Make a Blob from the bytes
var blob = new Blob([bytes], {type: 'image/bmp'});

// Use createObjectURL to make a URL for the blob
var image = new Image();
image.src = URL.createObjectURL(blob);
document.body.appendChild(image);

Das vollständige Beispiel finden Sie unter: http://jsfiddle.net/nj82y73d/

In Ihrem Beispiel sollten Sie createElement('img').

In Ihrem Link , base64blob != Base64.encode(blob).

Dies funktioniert, solange Ihre Daten gültig sind http://jsfiddle.net/SXFwP/ (Ich hatte keine BMP-Bilder, also musste ich PNG verwenden).

Ich denke, Sie hatten einen Fehler im Inline-Code Ihres Bildes. Versuche dies :

var image = document.createElement('img');
    
image.src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==";
    
image.width=100;
image.height=100;
image.alt="here should be some image";
    
document.body.appendChild(image);

Hilfreicher Link: http://dean.edwards.name/my/base64-ie.html

Das Problem war, dass ich hexadezimale Daten hatte, die vor der Base64-Codierung in Binärdaten konvertiert werden mussten.

in PHP:

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

In der Geige ist Ihr Blob kein Blob, sondern eine Zeichenfolgendarstellung von hexadezimalen Daten. Versuchen Sie dies auf einem Blob und 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 für Ihre image element () -Quelle (src) bereit ist.