У меня есть сервер WebSocket, реализованный на Java. Когда клиент подключается, я хочу отправить изображение по этому соединению для использования клиентом в элементе canvas. Я придумал следующий код сервера:

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 на стороне клиента выглядит так:

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

Соединение работает, и данные отправляются (blob.size имеет правильное значение), но изображение не отображается на холсте. Firefox выдает мне сообщение об ошибке «Ошибка типа: значение не может быть преобразовано ни в одно из: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement.».

Я осознаю тот факт, что использование WebSockets - не лучший способ отправить изображение клиенту. После отправки изображения WebSocket используется только для отправки текстовых сообщений.

Что мне нужно изменить, чтобы изображение отправлялось на холст?

Использованные ресурсы:

Как преобразовать изображение в байтовый массив в Java?

Получите Blob в WebSocket и визуализируйте как изображение в Canvas