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?

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?

• java
• javascript
• websocket
• jetty
• binary-data

• Why would you send this image over a websocket instead of just writing a servlet that can serve it normally? – Andrew Mao Commented Mar 20, 2013 at 15:17
• I know I can use a servlet for this. This is just for the sake of learning websockets. – Alina Danila Commented Mar 20, 2013 at 18:00

2 Answers 2

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.

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.