Utilisation de JavaScript pour afficher un objet blob


88

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.


Quel est le format du blob? S'agit-il d'une image dans un format (jpeg, png, gif, etc.) ou simplement des octets RVB?
bjornd

4
Ne devrait-il pas être à la document.createElement('img');place dedocument.createElement('image');?
Pablo Lozano

Réponses:


114

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"/>

22
La ligne importante est la urlCreator.createObjectURL(blob)qui renvoie une imageUrl qui peut être affectée à une image src.
Agent47DarkSoul

7
N'oubliez pas de révoquer l'URL créée une fois que vous avez terminé avec elle en appelant; revokeObjectURL
Ralpharoo

Je suppose que l'image de OP est dans une sorte de champ dans une base de données, c'est-à-dire que OP ne peut pas l'obtenir directement . S'il pouvait le faire, il utiliserait très probablement une imgbalise - directement au lieu de faire XHR / fetch; parce que les deux sont sujets aux SOP.
Christian Ulbrich le

75

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


Cela convertira-t-il automatiquement base64 car l'image est encodée en base64?
P Satish Patro

2
Je t'aime ... j'ai passé 4 heures à essayer de résoudre jusqu'à ce que je trouve ça.
tinyCoder

Que se passe-t-ilif (typeof URL !== "function") {}
Zanderwar

19

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/


14

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


Bon point sur l'img. Notez que «img» est un élément d'image html où «image» est un élément d'entrée html de type image, bien que dans ce cas cela ne fasse aucune différence. Je suppose que les données d'image sont valides, car elles proviennent d'une source tierce. Savez-vous de toute façon tester cela? Ou un site facile qui donne un blob à partir d'une image téléchargée? Je voudrais tester les BMP
GAgnew

Le "blob" dans votre violon n'est pas en fait un blob. Vous avez utilisé une chaîne encodée en base64.
elliotwesoff

5

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


3

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

0

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)

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.