jetty websockets 发送二进制数据（图片）答案

【问题标题】：jetty websockets send binary data (image)jetty websockets 发送二进制数据（图片）
【发布时间】：2013-03-07 11:35:30
【问题描述】：

我正在尝试使用 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 />";
}

};

如果我将图像写在磁盘上，代码很好，但是如果我尝试在 HTML 页面上显示图像，我会得到一些随机的彩色图像。我可能以错误的方式编码图像。

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

【问题讨论】：

为什么要通过 websocket 发送这张图片，而不是写一个可以正常服务的 servlet？
我知道我可以为此使用 servlet。这只是为了学习websockets。

标签： java javascript websocket jetty binary-data

【解决方案1】：

你是对的。问题是图像编码。

替换：

img.src = tempcanvas.toDataURL();

到

img.src = tempcanvas.toDataURL("image/jpeg");

默认格式为 PNG。

【讨论】：

【解决方案2】：

在我看来这是错误的：

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

您不能只将 bytearray 中的数据放在 imgdata.data 中，因为在您的情况下 bytearray 是编码 (jpeg) 的。毫不奇怪，您在某些画布上获得了随机像素（我猜是在画布的上侧）。您需要将字节数组编码为data url，并将其设置为图像的 src。不需要画布。

【讨论】：