Question

我将图像转换为java中的bytebuffer，并通过websocket中的websocket发送给客户端。 Java方面看起来像：

@OnOpen
public void onOpen(Session sessions) {
    String fileName = sessions.getUserPrincipal().getName() + ".png";
    File fi = new File("/Users/shilu/MyProject/Chat/Photo/" + fileName);
    byte[] fileContent = null;
    try {
        fileContent = Files.readAllBytes(fi.toPath());
        ByteBuffer buf = ByteBuffer.wrap(fileContent);
        sessions.getBasicRemote().sendBinary(buf);
    } catch (IOException e) {
        e.printStackTrace();
    }
}

在客户端，我只是这样：

gp.onmessage = function(evt) {
    var msg = evt.data;
};

现在如何在html中显示该图像......？

Answer 1

尝试将evt.data放入图像src属性

gp.onmessage = function(evt) {
   var msg = evt.data;
   document.getElementById("image").src = msg;
};

Answer 2

首先，您需要将数据转换为base64，然后创建数据URI：

var img = document.createElement('img');
img.src = 'data:image/jpg;base64,' + btoa(evt.data);
document.body.appendChild(img);

Answer 3

在返回之前将图像字节转换为java中的base64编码字符串。

StringUtils.newStringUtf8(Base64.encodeBase64(buf.array(), false));

然后在你的html文件中添加图片，如下所示： <img src="data:image/jpg;base64,{base64String returned from java}"/>

如何在HTML中将ByteBuffer转换为图像

3 个答案: