如何从Java websocket服务器发送图像以在HTML5画布中使用

Question

我有一个用Java实现的WebSocket服务器。当客户端连接时，我想通过该连接发送一个图像，供客户端在画布元素中使用。我想出了以下服务器代码：

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给我错误消息"TypeError:Value无法转换为任何一个：HTMLImageElement、HTMLCanvasElement、HTMLVideoElement。"。

我知道使用WebSockets并不是向客户端发送图像的最佳方式。发送图像后，WebSocket仅用于发送文本消息。

我需要更改什么才能将要发送的图像应用到画布？

使用的资源：

如何在java中将图像转换为字节数组？

在WebSocket中接收Blob并在Canvas 中渲染为图像

Answer 1

在发送之前尝试将图像转换为base64，例如：

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

这里有一个关于如何在Java 中将图像转换为base64的链接