Wyświetl obraz z obiektu blob za pomocą javascript i stron internetowych

Question

Aktualnie pracuję nad aplikacją WebSocket, która wyświetla obrazy wysyłane przez serwer C++. Widziałem kilka tematów, wokół tam, ale ja nie potrafię pozbyć się tego błędu w Firefoksie:

Obraz uszkodzony lub ściętego: data: image/png; base64 [niektóre dane]

Oto kod JavaScript używam do wyświetlania mojego 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); 
} 

Używam obraz czerwoną kropką, które znalazłem na ten temat: https://stackoverflow.com/a/4478878/1464608 a klasa jest z Base64 tutaj: https://stackoverflow.com/a/246813/1464608

Ale wynik base64, który otrzymuję, nie jest zgodny, a Firefox pobiera błąd w obrazie, który jest uszkodzony.

Wiem, że to niewiele informacji, ale nie mam pojęcia, gdzie szukać:/ Każda pomoc jest więcej niż mile widziany !!

Answer 1

Myślę, że najczystszym rozwiązaniem byłoby zmiana enkodera base64, aby działał bezpośrednio na tablicy Uint8Array zamiast na łańcuchu.

Ważne: W tym celu musisz ustawić wartość binaryType gniazda internetowego na "arraybuffer". Metoda

onmessage powinna wyglądać następująco:

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

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

Przetworzony koder powinien wyglądać następująco (na podstawie 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

Dzięki, wszystko działa super !!

więc postać chciałbym podzielić się moją ostateczną kodu javascript:

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

naprawdę nie rozumiem, dlaczego wersja blob jest tak trudne, ale to załatwiło sprawę!

Answer 3

Możesz napisać to znacznie prostsze:

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

Inną alternatywą

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

Dzięki innych odpowiedzi, udało mi się otrzymać obrazu JPEG przez websocket i wyświetlić go w nowym oknie:

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