2013-03-18 4 views
5

Я пытаюсь использовать Jetty 8.1.2 WebSockets для отправки двоичных данных (изображения) клиенту javascript.Jetty websockets отправлять двоичные данные (изображение)

WebSockets код 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 Код:

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?

+0

Зачем вы отправляете это изображение через websocket вместо того, чтобы просто писать сервлет, который может нормально его обслуживать? –

+0

Я знаю, что для этого могу использовать сервлет. Это только ради изучения веб-сайтов. –

ответ

3

Вы правы. Проблема заключается в кодировании изображения.

Заменить:

img.src = tempcanvas.toDataURL(); 

в

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

По умолчанию используется формат PNG.

+0

спасибо за ответ, я проверю его. –

2

Мне кажется, что это неправильно:

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

вы не можете просто поместить данные из ByteArray в imgdata.data, как ByteArray кодируется (JPEG) в вашем случае. Не удивительно, что вы получали случайные пиксели на некоторых холстах (в верхней части этого, я думаю). Вам нужно закодировать bytearray на data url и просто установить это как src для изображения. Нет необходимости в холсте.

Смежные вопросы