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

Share Improve this question Follow edited Mar 20, 2013 at 14:44 Alina Danila asked Mar 18, 2013 at 23:00 Alina DanilaAlina Danila 1,68311 gold badge2828 silver badges6363 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.