wake-up-neo.com

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 enthält den gesamten erforderlichen Code, einschließlich des Blobs. Der vervollständigte Code sollte ein Bild korrekt anzeigen.

48
GAgnew

Das Problem war, dass ich hexadezimale Daten hatte, die in Binärdaten konvertiert werden mussten, bevor base64encoded wurde.

in PHP:

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

Sie können das BLOB-Objekt auch direkt aus 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 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:

<img id="image"/>
81
AdamZ

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

42
Ogglas

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 verwenden PNG).

10
nachito

Sie können Ihren String in ein int8Array konvertieren, um die Rohdaten zu erhalten. Erstellen Sie dann ein Blob für diese Daten und übergeben Sie es an RL.createObjectURL (blob) , um das 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);

Sie können das vollständige Beispiel unter folgender Adresse ausprobieren: http://jsfiddle.net/nj82y73d/

9
nkron

Ich vermute, 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

4
marius_neo