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

How to send an image from a Java websocket server to use in an HTML5 canvas?(如何从 Java websocket 服务器发送图像以在 HTML5 画布中使用?)

问题描述

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

public void onOpen(Connection connection) {尝试 {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);} 捕捉(异常 e){System.out.println("错误:"+e.getMessage());}}

客户端 Javascript 如下所示:

onmessage : function(m) {如果(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

连接正常并发送数据(blob.size 具有正确的值)，但图像未绘制到画布上.Firefox 给我错误消息TypeError:值无法转换为任何一个:HTMLImageElement、HTMLCanvasElement、HTMLVideoElement.".

我知道使用 WebSockets 并不是向客户端发送图像的最佳方式.发送图片后，WebSocket 仅用于发送短信.

为了将图像发送到画布上，我需要进行哪些更改?

使用的资源:

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

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

发送前尝试将图片转base64，例如:

函数drawImage(imgString){var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");变种图像 = 新图像()；image.src = imgString;image.onload = 函数() {ctx.drawImage(图像, 0, 0);};}

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

I have a WebSocket server implemented in Java. When a client connects I want to send an image over this connection for the client to use in a canvas element. I have come up with the following server code:

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

The client-side Javascript looks like this:

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

The connection works and the data is sent (blob.size has the correct value), but the image is not drawn onto the canvas. Firefox gives me the error message "TypeError: Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement.".

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