3

我有一个用 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：值无法转换为任何一个：HTMLImageElement、HTMLCanvasElement、HTMLVideoElement。”。

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

我需要更改哪些图像才能将图像发送到画布？

使用的资源：

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

在 WebSocket 中接收 Blob 并在 Canvas 中呈现为图像

4

1 回答 1

2

在发送之前尝试将图像转换为 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 的链接

于 2013-12-14T05:04:32.580 回答