jetty websockets ikili veri (resim) gönder

Question

Jetty 8.1.2 WebSockets'ı bir javascript istemcisine ikili veri (resim) göndermek için kullanıyorum.

WebSockets Java kodu:

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 kodu:

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

};

Görüntüyü diske yazıyorsam, ancak görüntüyü bir HTML sayfasında görüntülemeye çalışırsam biraz rasgele renkli görüntü aldığımda kod gayet iyi. Büyük olasılıkla görüntüyü yanlış bir şekilde kodluyorum.

Görüntüyü ikili veri olarak nasıl göndereceğiniz ve javascript ile nasıl görüntüleneceği hakkında bir fikriniz var mı?

Answer 1

Haklısınız. Sorun görüntü kodlamasıdır.

değiştirin:

img.src = tempcanvas.toDataURL(); 

varsayılan biçim PNG olduğunu

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

için.

Answer 2

yanlış olduğunu bana öyle geliyor: ByteArray sizin durumunuzda (jpeg) kodlanır olarak

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

sadece imgdata.data yılında ByteArray verileri koyamazsınız. Tuvalin bazılarında rasgele pikseller almanıza şaşırmadım (bunun üst tarafında, sanırım). Bytearray'i data url'a kodlamanız ve bunu görüntü için src olarak ayarlamanız gerekir. Tuvale gerek yok.