Question

我有一个用Java实现的WebSocket服务器。当客户端连接时，我想通过此连接发送图像，以便客户端在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给我错误消息“TypeError：Value无法转换为以下任何一个：HTMLImageElement，HTMLCanvasElement，HTMLVideoElement。”。

我知道使用WebSockets这不是将图像发送到客户端的最佳方式。发送图像后，WebSocket仅用于发送短信。

我需要更改要发送到应用于画布的图像吗？

使用的资源：

how to convert image to byte array in java?

Receive Blob in WebSocket and render as image in 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);
    };
}

Here's关于如何在Java中将图像转换为base64的链接

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

1 个答案: