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

Sie können auch direkt ein BLOB-Objekt von XMLHttpRequest erhalten. 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 so 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:

Answer 2

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

Answer 3

Sie können Ihren String in ein Uint8Array konvertieren, um die Rohdaten zu erhalten. Erstellen Sie dann ein Blob für diese Daten und übergeben Sie es an URL.createObjectURL(blob), um den Blob in eine URL zu konvertieren, die Sie an img.src übergeben.

var data = '424D5E070000000000003E00000028000000EF...';

// Konvertieren Sie den String in 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);
}

// Erstellen Sie einen Blob aus den Bytes
var blob = new Blob([bytes], {type: 'image/bmp'});

// Verwenden Sie createObjectURL, um eine URL für den Blob zu erstellen
var image = new Image();
image.src = URL.createObjectURL(blob);
document.body.appendChild(image);

Sie können das komplette Beispiel unter folgendem Link ausprobieren: http://jsfiddle.net/nj82y73d/

Answer 4

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

In Ihrem Link gilt 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).

Answer 5

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

var image = document.createElement('img');

image.src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==";

image.width=100;
image.height=100;
image.alt="Hier sollte ein Bild sein";

document.body.appendChild(image);

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