How to send an image from a Java websocket server to use in an HTML5 canvas?

Question

I have a WebSocket server implemented in Java. When a client connects I want to send an image over this connection for the client to use in a canvas element. I have come up with the following server code:

public void onOpen(Connection connection) {
    try {
        BufferedImage image = ImageIO.read(new File("image.jpg"));
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        ImageIO.write(image, "jpg", baos);
        byte[] byteArray = baos.toByteArray();
        connection.sendMessage(byteArray, 0, byteArray.length);
    } catch (Exception e ){
        System.out.println("Error: "+e.getMessage());
    }
}

The client-side Javascript looks like this:

onmessage : function(m) {
    if (m.data) {
        if (m.data instanceof Blob) {
            var blob = m.data;

            var bytes = new Uint8Array(blob);
            var image = context.createImageData(canvas.width, canvas.height);
            for (var i=0; i<bytes.length; i++) {
                image.data[i] = bytes[i];
            }
        }
    }
}

The connection works and the data is sent (blob.size has the correct value), but the image is not drawn onto the canvas. Firefox gives me the error message "TypeError: Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement.".

I am aware of the fact that this using WebSockets is not the best way to send an image to the client. After sending the image the WebSocket is only used to send text messages.

What do I need to change for the image to be sent an applied to the canvas?

Resources used:

how to convert image to byte array in java?

Receive Blob in WebSocket and render as image in Canvas

Did you resolve your problem ? I am working on a similar project, take a look at this video : blogs.oracle.com/arungupta/entry/… minutes 6:15, I also read that jpeg needs to be decoded : stackoverflow.com/questions/16194908/… — Mehdi Karamosly
– Mehdi Karamosly, Commented Sep 11, 2013 at 3:35
hey, what was it that the Connection class that you use? From what library is it? I'm questioning it here: stackoverflow.com/questions/23557300/what-connection-is-this — user2230662
– user2230662, Commented May 9, 2014 at 8:48
It is from the org.eclipse.jetty.websocket.WebSocket package, which I include from this jar-file: mvnrepository.com/artifact/org.eclipse.jetty/jetty-websocket/… Hope that helps — Waboodoo
– Waboodoo, Commented May 10, 2014 at 9:50

Community · Accepted Answer · 2017-05-23 12:14:46Z

2

Try converting the image to base64 before sending, for example:

function drawImage(imgString){
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var image = new Image();
    image.src = imgString;
    image.onload = function() {
        ctx.drawImage(image, 0, 0);
    };
}

Here's a link on how to convert the image to base64 in Java

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Dec 14, 2013 at 5:04

Jack burridge

5207 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Waboodoo Over a year ago

That looks good, I will see into it as soon as I have time again. Thanks :)

Waboodoo Over a year ago

Yes, this works! However I used a different class for the Base64 encoding than the one you linked me to. The one I used didn't automatically include the "data:image/png;base64,"-prefix so I had to add it myself. I don't know if the one you suggest does this. If not it would have to be added separately.

Roman Gaufman Over a year ago

base64 encoding and decoding has certain processing overheads as well as the resulting data is around 30% larger. Is there a better solution?

Teocci Over a year ago

what is imgString?

Collectives™ on Stack Overflow

How to send an image from a Java websocket server to use in an HTML5 canvas?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related