Afficher les blobs à l'aide de JavaScript

Question

Je récupère une image Blob d’une base de données et je souhaite pouvoir afficher l’image à l’aide de JavaScript. Le code suivant produit une icône d'image cassée sur la page :

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

Voici un jsFiddle qui contient tout le code nécessaire, y compris le blob. Le code complété doit afficher l'image correctement.

Answer 1

Vous pouvez également obtenir des objets BLOB directement depuis XMLHttpRequest. Définissez simplement ResponseType sur blob. Voici mon code :

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

La fonction de réponse ressemble à ceci :

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

Nous créons simplement un élément image vide en HTML :

<img id="image"/>

Answer 2

Le problème est que j'ai des données hexadécimales qui doivent être converties en binaire avant l'encodage Base64.

En PHP :

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