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

我有一个用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具有正确的值），但图像未绘制到canvas上。 Firefox给我错误消息“TypeError：Value无法转换为以下任何一个：HTMLImageElement，HTMLCanvasElement，HTMLVideoElement。”。

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

对于要应用于canvas的图像，我需要更改什么？

使用的资源：

如何在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的链接