jetty websockets invia dati binari (immagine)

Question

Sto cercando di utilizzare Jetty 8.1.2 WebSockets per inviare alcuni dati binari (un'immagine) a un client javascript.

WebSockets codice Java:

BufferedImage image = getTheImage(); 

ByteArrayOutputStream baos = new ByteArrayOutputStream(); 
ImageIO.write(image, "jpg", baos); 
baos.flush(); 
byte[] imageInBytes = baos.toByteArray(); 
baos.close(); 

socket.getConnection().sendMessage(imageInBytes, 0, imageInBytes.length); 

codice javascript:

binarySocket.onmessage = function(event) { 
if (event.data instanceof ArrayBuffer) { 
    var bytearray = new Uint8Array(event.data); 

    var tempcanvas = document.createElement('canvas'); 
    tempcanvas.height = imageheight; 
    tempcanvas.width = imagewidth; 
    var tempcontext = tempcanvas.getContext('2d'); 

    var imgdata = tempcontext.getImageData(0, 0, imagewidth,imageheight); 
    var imgdatalen = imgdata.data.length; 

    for (var i = 8; i < imgdatalen; i++) { 
     imgdata.data[i] = bytearray[i]; 
    } 

    tempcontext.putImageData(imgdata, 0, 0); 

    var img = document.createElement('img'); 
    img.height = imageheight; 
    img.width = imagewidth; 
    img.src = tempcanvas.toDataURL(); 
    chatdiv = document.getElementById('chatdiv'); 
    chatdiv.appendChild(img); 
    chatdiv.innerHTML = chatdiv.innerHTML + "<br />"; 
} 

};

Il codice va bene se scrivo l'immagine su disco, ma se provo a visualizzare l'immagine su una pagina HTML, ottengo qualche immagine colorata a caso. Probabilmente sto codificando l'immagine in modo sbagliato.

Qualche idea su come inviare l'immagine come dati binari e visualizzarla con javascript?

Answer 1

Hai ragione. Il problema è la codifica dell'immagine.

Sostituire:

img.src = tempcanvas.toDataURL(); 

a

img.src = tempcanvas.toDataURL("image/jpeg"); 

Il formato predefinito è PNG.

Answer 2

Mi sembra che questo sia sbagliato:

for (var i = 8; i < imgdatalen; i++) { 
    imgdata.data[i] = bytearray[i]; 
} 

non si può semplicemente inserire i dati da ByteArray in imgdata.data come ByteArray è codificato (jpeg) nel tuo caso. Non è una sorpresa che tu stia ottenendo dei pixel casuali su parte della tela (nella parte superiore, credo). Devi codificare il bytearray su data url e impostarlo come src per l'immagine. Nessuna tela necessaria.