Visualizza l'immagine dal BLOB usando javascript e websockets

Question

Attualmente sto lavorando a un'applicazione WebSocket che sta visualizzando immagini inviate da un server C++. Ho visto un paio di argomenti intorno lì, ma io non riesco a sbarazzarsi di questo errore in Firefox:

Immagine corrotto o troncato: Dati: image/png; base64, [alcuni dati]

Ecco il codice Javascript che sto usando per mostrare il mio blob:

socket.onmessage = function(msg) { 
    var blob = msg.data; 

    var reader = new FileReader(); 
    reader.onloadend = function() { 
     var string = reader.result; 
     var buffer = Base64.encode(string); 
     var data = "data:image/png;base64,"+buffer; 

     var image = document.getElementById('image'); 
     image.src = data; 
    }; 
    reader.readAsBinaryString(blob); 
} 

sto usando l'immagine di un puntino rosso che ho trovato su questo argomento: https://stackoverflow.com/a/4478878/1464608 E la classe Base64 è da qui: https://stackoverflow.com/a/246813/1464608

Ma il risultato base64 che ottengo non corrisponde e Firefox mi recupera un errore dell'immagine corrotta.

So che questo non è molte informazioni ma non ho la minima idea di dove guardare:/ Qualsiasi aiuto è più che benvenuto !!

Answer 1

Penso che la soluzione più pulita sarebbe quella di modificare l'encoder base64 per operare direttamente su un Uint8Array anziché su una stringa.

Importante: per questo scopo è necessario impostare il tipo binario del socket Web su "arraybuffer". Metodo

L'onMessage dovrebbe essere simile a questo:

socket.onmessage = function(msg) { 
    var arrayBuffer = msg.data; 
    var bytes = new Uint8Array(arrayBuffer); 

    var image = document.getElementById('image'); 
    image.src = encode(bytes); 
}; 

L'encoder convertito deve quindi simile a questa (sulla base di https://stackoverflow.com/a/246813/1464608):

// public method for encoding an Uint8Array to base64 
function encode (input) { 
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/="; 
    var output = ""; 
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4; 
    var i = 0; 

    while (i < input.length) { 
     chr1 = input[i++]; 
     chr2 = i < input.length ? input[i++] : Number.NaN; // Not sure if the index 
     chr3 = i < input.length ? input[i++] : Number.NaN; // checks are needed here 

     enc1 = chr1 >> 2; 
     enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); 
     enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); 
     enc4 = chr3 & 63; 

     if (isNaN(chr2)) { 
      enc3 = enc4 = 64; 
     } else if (isNaN(chr3)) { 
      enc4 = 64; 
     } 
     output += keyStr.charAt(enc1) + keyStr.charAt(enc2) + 
        keyStr.charAt(enc3) + keyStr.charAt(enc4); 
    } 
    return output; 
} 

Answer 2

Grazie, sta funzionando grande !!

così ho dato che vorrei condividere il mio codice javascript finale:

var socket = new WebSocket('ws://'+host+':'+port, protocol); 
socket.binaryType = 'arraybuffer'; 

try { 
    socket.onopen = function() { 
     document.getElementById('status').style.backgroundColor = '#40ff40'; 
     document.getElementById('status').textContent = 'Connection opened'; 
    } 

    socket.onmessage = function(msg) { 
     var arrayBuffer = msg.data; 
     var bytes = new Uint8Array(arrayBuffer); 

     var image = document.getElementById('image'); 
     image.src = 'data:image/png;base64,'+encode(bytes); 
    } 

    socket.onclose = function(){ 
     document.getElementById('status').style.backgroundColor = '#ff4040'; 
     document.getElementById('status').textContent = 'Connection closed'; 
    } 
} catch(exception) { 
    alert('Error:'+exception); 
} 

non capisco il motivo per cui la versione blob è così difficile, ma questo ha fatto il trucco!

Answer 3

Si può scrivere molto più semplice:

socket.onmessage = function(msg) { 
    var arrayBuffer = msg.data; 
    var bytes = new Uint8Array(arrayBuffer); 
    var blob  = new Blob([bytes.buffer]); 

    var image = document.getElementById('image'); 

    var reader = new FileReader(); 
    reader.onload = function(e) { 
     image.src = e.target.result; 
    }; 
    reader.readAsDataURL(blob); 
}; 

Answer 4

Un'altra alternativa

let urlObject; 

socket.onmessage = function(msg) { 
    const arrayBuffer = msg.data; 
    const image = document.getElementById('image'); 

    if (urlObject) { 
     URL.revokeObjectURL(urlObject) // only required if you do that multiple times 
    } 
    urlObject = URL.createObjectURL(new Blob([arrayBuffer])); 

    image.src = urlObject; 

}; 

Answer 5

Grazie alle altre risposte, sono riuscito a ricevere un'immagine JPEG da websocket e visualizzarlo in una nuova finestra:

socket.binaryType = "arraybuffer";     
socket.onmessage = function (msg) 
       { var bytes = new Uint8Array(msg.data); 
        var blob = new Blob([bytes.buffer]); 
        window.open(URL.createObjectURL(blob),'Name','resizable=1'); 
       };