Verwenden von Javascript zum Anzeigen von Blob

Bin ich beim abrufen eines Blob-Bildes aus einer Datenbank, und ich möchte in der Lage sein zu sehen, dass Bild mit javascript. Der folgende code erzeugt ein gebrochenes Bild-Symbol auf der Seite:

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

Hier ein jsFiddle, welches alle code erforderlich, einschließlich der blob. Der fertige code sollte richtig ein Bild anzuzeigen.

Danke für Eure Hilfe.

http://jsfiddle.net/PDhCy/1/

InformationsquelleAutor der Frage GAgnew | 2011-10-04

  1. 59

    Können Sie auch BLOB-Objekt direkt XMLHttpRequest. Einstellung responseType 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 response-Funktion sieht wie folgt 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, um einen leeren Bild-element in HTML:

    <img id="image"/>

    InformationsquelleAutor der Antwort AdamZ

  2. 17

    Wenn Sie verwenden möchten, Holen statt:

    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;
});

    Folgen Sie bitte diesem link :
    https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

    InformationsquelleAutor der Antwort Ogglas

  3. 10

    In deinem Beispiel, sollten Sie createElement('img').

    In deinem link base64blob != Base64.encode(blob).

    Dies funktioniert, so lange, wie Sie Ihre Daten gültig http://jsfiddle.net/SXFwP/ (ich habe keine BMP-Bilder so hatte ich die Verwendung von PNG).

    InformationsquelleAutor der Antwort nachito

  4. 6

    Können Sie konvertieren den string in eine Uint8Arrayum die raw-Daten. Dann erstellen Sie eine Blob für die Daten und übergeben Sie an URL.createObjectURL(blob) zu konvertieren, den Blob in eine URL, die Sie übergeben, um img.src.

    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);

    Können Sie versuchen, das komplette Beispiel an: http://jsfiddle.net/nj82y73d/

    InformationsquelleAutor der Antwort nkron

  5. 2

    War das problem, dass ich hatte hexadezimal-Daten, die benötigt werden, um in das Binärformat konvertiert, bevor Sie base64encoded.

    in PHP:

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

    InformationsquelleAutor der Antwort GAgnew

Schreibe einen Kommentar