jetty websockets send binary data (image)

Question

I am trying to use Jetty 8.1.2 WebSockets to send some binary data (an image) to a javascript client.

websockets java code:

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

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

};

The code is fine if I write the image on disk, but if I try to display the image on an HTML page, I get some random coloured image. I am probably encoding the image in a wrong way.

Any idea how to send the image as binary data and display it with javascript?

Answer 1

You are right. The problem is the image encoding.

Replace:

img.src = tempcanvas.toDataURL();

to

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

The default format is PNG.

Answer 2

It seems to me that this is wrong:

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

you can't just put the data from bytearray in imgdata.data as bytearray is encoded (jpeg) in your case. No surprise you were getting random pixels on some of the canvas (in the upper side of it, i guess). You need to encode the bytearray to a data url and just set that as src for the image. No canvas needed.