Mam serwer WebSocket zaimplementowany w Javie. Gdy klient się łączy, chcę wysłać obraz za pośrednictwem tego połączenia, aby klient mógł użyć go w elemencie canvas. Wymyśliłem następujący kod serwera:

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());
    }
}

JavaScript po stronie klienta wygląda tak:

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];
            }
        }
    }
}

Połączenie działa i dane są wysyłane (blob.size ma poprawną wartość), ale obraz nie jest rysowany na płótnie. Firefox wyświetla komunikat o błędzie „Błąd typu: nie można przekonwertować wartości na dowolny z: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement.”.

Jestem świadomy faktu, że korzystanie z WebSockets nie jest najlepszym sposobem na przesłanie obrazu do klienta. Po wysłaniu obrazu WebSocket służy tylko do wysyłania wiadomości tekstowych.

Co muszę zmienić, aby obraz został wysłany na płótno?

Wykorzystane zasoby:

jak przekonwertować obraz do tablicy bajtów w java?

Odbierz Blob w WebSocket i renderuj jako obraz w Canvas