web-dev-qa-db-fra.com

Utiliser JavaScript pour afficher un blob

Je récupère une image Blob d'une base de données et j'aimerais pouvoir afficher cette image à l'aide de JavaScript. Le code suivant génère 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.

javascriptimagebase64blob
48
GAgnew

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

en PHP:

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

Vous pouvez également obtenir un objet BLOB directement à partir de XMLHttpRequest. Définir responseType sur blob rend l'astuce. 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"/>
81
AdamZ

Si vous voulez utiliser fetch à 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

42
Ogglas

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 aucun BMP images donc j'ai dû utiliser PNG).

10
nachito

Vous pouvez convertir votre chaîne en un int8Array pour obtenir les données brutes. Créez ensuite un Blob pour ces données et transmettez-le à RL.createObjectURL (blob) pour convertir le Blob en une URL à laquelle vous passez 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 à l’adresse suivante: http://jsfiddle.net/nj82y73d/

9
nkron

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

4
marius_neo