부두 웹 소켓은 이진 데이터 (이미지)를 보냅니다.

Question

자바이 클라이언트에 바이너리 데이터 (이미지)를 보내기 위해 제티 8.1.2 웹 소켓을 사용하려고합니다.

WebSocket을 자바 코드 :

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

자바 스크립트 코드 :

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

};

디스크에 이미지를 쓰면 코드가 잘되지만 HTML 페이지에 이미지를 표시하려고하면 임의의 컬러 이미지가 표시됩니다. 잘못된 방식으로 이미지를 인코딩하고 있습니다.

이미지를 바이너리 데이터로 보내고 javascript로 표시하는 방법을 알려주세요.

Answer 1

당신 말이 맞습니다. 문제는 이미지 인코딩입니다.

은 교체 :

img.src = tempcanvas.toDataURL(); 

기본 형식은 PNG입니다

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

에.

Answer 2

잘못 나에게 보인다 된 ByteArray가 귀하의 경우 (JPEG)을 인코딩으로

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

방금 ​​imgdata.data에 BYTEARRAY 에서 데이터를 넣을 수 없습니다. 캔버스의 일부에 무작위 픽셀을 가져 오는 것도 놀라운 일이 아닙니다 (위쪽에 있음). bytearray를 data url으로 인코딩하고 이미지의 src로 설정해야합니다. 캔버스가 필요하지 않습니다.