Utilisation de JavaScript pour afficher un objet blob

Je récupère une image Blob d'une base de données et j'aimerais pouvoir afficher cette image en utilisant 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 contenant tout le code requis, y compris le blob. Le code complété doit afficher correctement une image.

Vous pouvez également obtenir un objet BLOB directement à partir de XMLHttpRequest. La définition de responseType sur blob fait l'affaire. Voici mon code:

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

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

Il suffit de créer un élément d'image vide en HTML:

<img id="image"/>

Si vous souhaitez utiliser la récupération à la place:

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

La source:

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

Vous pouvez convertir votre chaîne en Uint8Array pour obtenir les données brutes. Créez ensuite un blob pour ces données et passez à URL.createObjectURL (blob) pour convertir le blob en une URL que vous transmettez à 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);

Vous pouvez essayer l'exemple complet sur: http://jsfiddle.net/nj82y73d/

Dans votre exemple, vous devriez createElement('img').

Dans votre lien, base64blob != Base64.encode(blob).

Cela fonctionne, tant que vos données sont valides http://jsfiddle.net/SXFwP/ (je n'avais aucune image BMP donc j'ai dû utiliser PNG).

Je suppose que vous avez eu une erreur dans le code en ligne de votre image. Essaye ça :

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

Lien utile: http://dean.edwards.name/my/base64-ie.html

Le problème était que j'avais des données hexadécimales qui devaient être converties en binaire avant d'être codées en base64.

en PHP:

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

Dans le violon, votre blob n'est pas un blob, c'est une représentation sous forme de chaîne de données hexadécimales. Essayez ceci sur un blob et c'est fait

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 vous donne une image encodée en base64 prête pour votre image element () source (src)