Java jetty WebSocket发送二进制数据（图像）

我正在尝试使用Jetty 8.1.2 WebSockets向javascript客户端发送一些二进制数据（图像）

websockets java代码：

BufferedImage image = getTheImage();

ByteArrayOutputStream baos = new ByteArrayOutputStream();
ImageIO.write(image, "jpg", baos);
baos.flush();
byte[] imageInBytes = baos.toByteArray();
baos.close();

socket.getConnection().sendMessage(imageInBytes, 0, imageInBytes.length);

javascript代码：

binarySocket.onmessage = function(event) {
if (event.data instanceof ArrayBuffer) {
    var bytearray = new Uint8Array(event.data);

    var tempcanvas = document.createElement('canvas');
    tempcanvas.height = imageheight;
    tempcanvas.width = imagewidth;
    var tempcontext = tempcanvas.getContext('2d');

    var imgdata = tempcontext.getImageData(0, 0, imagewidth,imageheight);
    var imgdatalen = imgdata.data.length;

    for ( var i = 8; i < imgdatalen; i++) {
        imgdata.data[i] = bytearray[i];
    }

    tempcontext.putImageData(imgdata, 0, 0);

    var img = document.createElement('img');
    img.height = imageheight;
    img.width = imagewidth;
    img.src = tempcanvas.toDataURL();
    chatdiv = document.getElementById('chatdiv');
    chatdiv.appendChild(img);
    chatdiv.innerHTML = chatdiv.innerHTML + "<br />";
}

binarySocket.onmessage=函数（事件）{
if（ArrayBuffer的event.data实例）{
var bytearray=新的Uint8Array（event.data）；
var tempcanvas=document.createElement（'canvas'）；
tempcanvas.height=图像高度；
tempcanvas.width=图像宽度；
var tempcontext=tempcanvas.getContext（'2d'）；
var imgdata=tempcontext.getImageData（0，0，imagewidth，imageheight）；
var imgdatalen=imgdata.data.length；
对于（变量i=8；i”；
}

})

如果我把图像写在磁盘上，代码就可以了，但是如果我试图在HTML页面上显示图像，我会得到一些随机的彩色图像。 我可能是用错误的方式对图像进行了编码

---

知道如何将图像作为二进制数据发送并用javascript显示吗？

你说得对。问题是图像编码

替换：

img.src = tempcanvas.toDataURL();

到

---

默认格式为PNG。

我觉得这是错误的：

for ( var i = 8; i < imgdatalen; i++) {
    imgdata.data[i] = bytearray[i];
}

for（变量i=8；i

---

您不能只将bytearray中的数据放入imgdata。在您的案例中，数据作为bytearray编码（jpeg）。毫不奇怪，在画布的某些部分（我猜是在画布的上方）会出现随机像素。您需要将bytearray编码为，并将其设置为图像的src。不需要画布。

为什么要通过websocket发送此图像，而不是编写一个可以正常服务的servlet？我知道我可以使用servlet来实现这一点。这只是为了学习WebSocket。

for ( var i = 8; i < imgdatalen; i++) {
    imgdata.data[i] = bytearray[i];
}