pomostowe bramki wysyłają dane binarne (obraz)

Question

Próbuję użyć Jetty 8.1.2 WebSockets do wysłania danych binarnych (obrazu) do klienta javascript.

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

JavaScript Kod:

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

};

Kod jest w porządku, jeśli zapisuję obraz na dysku, ale jeśli próbuję wyświetlić obraz na stronie HTML, otrzymuję losowy kolorowy obraz. Prawdopodobnie koduję obraz w niewłaściwy sposób.

Każdy pomysł, jak wysłać obraz jako dane binarne i wyświetlić go w javascript?

Answer 1

Masz rację. Problem polega na kodowaniu obrazu.

Wymienić:

img.src = tempcanvas.toDataURL(); 

do

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

Domyślny format PNG.

Answer 2

Wydaje mi się, że to jest złe:

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

nie można po prostu umieścić dane z ByteArray w imgdata.data jako ByteArray jest kodowany (JPEG) w Twoim przypadku. Nic dziwnego, że dostałeś losowe piksele na niektórych płótnach (chyba w górnej części). Musisz zakodować bytearray na data url i ustawić jako src dla obrazu. Nie jest potrzebne płótno.