Utilizzo di JavaScript per visualizzare un BLOB

96

Sto recuperando un'immagine Blob da un database e mi piacerebbe essere in grado di visualizzare quell'immagine utilizzando JavaScript. Il codice seguente produce un'icona di immagine interrotta nella pagina:

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

Ecco un jsFiddle contenente tutto il codice richiesto, incluso il BLOB. Il codice completato dovrebbe visualizzare correttamente un'immagine.

— GAgnew
fonte

Qual è il formato del BLOB? È un'immagine in qualche formato (jpeg, png, gif ecc.) O solo byte RGB?

— bjornd

5

Non dovrebbe essere document.createElement('img');invece didocument.createElement('image');?

— Pablo Lozano

122

Puoi anche ottenere l'oggetto BLOB direttamente da XMLHttpRequest. L'impostazione di responseType su blob rende il trucco. Ecco il mio codice:

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

E la funzione di risposta è simile a questa:

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

Dobbiamo solo creare un elemento immagine vuoto in HTML:

<img id="image"/>

— AdamZ
fonte

23

La riga importante è la urlCreator.createObjectURL(blob)che restituisce un imageUrl che può essere assegnato a un'immagine src.

— Agent47DarkSoul

7

Non dimenticare di revocare l'URL creato una volta terminato chiamando; revokeObjectURL

— Ralpharoo

Suppongo che l'immagine di OP sia in una sorta di campo in un db, cioè OP non può ottenerla direttamente . Se fosse in grado di farlo, molto probabilmente userebbe un imgtag - direttamente invece di fare XHR / fetch; perché entrambi sono inclini a SOP.

— Christian Ulbrich

78

Se invece vuoi usare fetch:

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

Fonte:

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

— Ogglas
fonte

Questo convertirà automaticamente base64 poiché l'immagine è codificata in base64?

— P Satish Patro

2

Ti amo .. ho passato 4 ore cercando di risolvere fino a quando non ho trovato questo.

— tinyCoder

Cosa succedeif (typeof URL !== "function") {}

— zanderwar

20

Puoi convertire la tua stringa in un Uint8Array per ottenere i dati grezzi. Quindi crea un Blob per quei dati e passa a URL.createObjectURL (blob) per convertire il Blob in un URL che passi a 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);

Puoi provare l'esempio completo su: http://jsfiddle.net/nj82y73d/

— nkron
fonte

14

Nel tuo esempio, dovresti createElement('img').

Nel tuo link, base64blob != Base64.encode(blob).

Funziona, purché i tuoi dati siano validi http://jsfiddle.net/SXFwP/ (non avevo immagini BMP quindi ho dovuto usare PNG).

— nachito
fonte

Buon punto sull'img. Dovresti notare che "img" è un elemento immagine html dove "immagine" è un elemento di input html di tipo immagine, anche se in questo caso non ha fatto la differenza. Presumo che i dati dell'immagine siano validi, poiché provengono da una fonte di terze parti. Sai comunque di testarlo? O un sito semplice che fornisce blob dall'immagine caricata? Vorrei testare i BMP

— GAgnew il

Il "blob" nel tuo violino non è in realtà un Blob. Hai usato una stringa con codifica base64.

— elliotwesoff

5

Immagino che tu abbia avuto un errore nel codice inline della tua immagine. Prova questo :

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

Espandi lo snippet

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

— marius_neo
fonte

3

Il problema era che avevo dati esadecimali che dovevano essere convertiti in binari prima di essere codificati in base64.

in PHP:

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

— GAgnew
fonte

0

Nel violino il tuo blob non è un blob, è una rappresentazione di stringa di dati esadecimali. Prova questo su un blob e il gioco è fatto

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 ti fornisce un'immagine con codifica base64 pronta per te image element () source (src)

— Bruno
fonte