使用Websockets发送的二进制数据在Javascript中渲染图像

Question

我正在努力使用Websocket客户端来显示从我的服务器端点发送的二进制（PNG）图像。 在我的Javascript客户端中，我将websocket设置如下：

 function send_message() {
                websocket = new WebSocket(wsUri);
                websocket.binaryType = "arraybuffer";
                websocket.onopen = function(evt) {
                    onOpen(evt)
                };
                websocket.onmessage = function(evt) {
                     draw(evt);
                };
                websocket.onerror = function(evt) {
                    onError(evt)
                };
            }

这是我在几个教程或SO线程中找到的绘制方法：

function draw(imgData){

                   if(event.data instanceof ArrayBuffer)
                    {

                        var bytearray = new Uint8Array(event.data);

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

                        var imgdata = tempcontext.getImageData(0,0,430,221);

                        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 = 221;
                            img.width = 430;

                            var dataURL = tempcanvas.toDataURL("image/png");

                            img.setAttribute( 'src',dataURL);
                            elem = document.getElementById('output');
                            elem.appendChild(img);
                            elem.innerHTML = elem.innerHTML + "<br />";  
                    }

}

不幸的是，只渲染了一堆像素的方形。我还附上了我的Javascript控制台的输出，以显示我通过网络收到的内容（实际上我可以在请求后看到以下两个GET）。 以下是我从服务器端发送映像的方式（Java）：

@OnOpen  
 public void hello(Session session) {

    File fi = new File("D:\\www\\images\\picture.png");
    byte[] fileContent=null;
    try {


        BufferedImage image = ImageIO.read(fi);
            ByteArrayOutputStream baos = new ByteArrayOutputStream();
            ImageIO.write(image, "png", baos);
            byte[] byteArray = baos.toByteArray();
            ByteBuffer buf = ByteBuffer.wrap(byteArray);

        session.getBasicRemote().sendBinary(buf);
        } 
         catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
     }

}

任何帮助？