通过Tomcat Websocket将图像缓冲为JPG到HTML 5 Canvas

Question

嘿，我们想通过tomcat websocket定期将缓冲的图像发送到画布中，有点像直播。

服务器代码：

private static void broadcastImage(BufferedImage img) {     
    StreamInbound someClient;
    byte[] arr = BufferedImageToByte(img);
    ListIterator<StreamInbound> iter = clients.listIterator();
    while (iter.hasNext()) {
        someClient = (MessageInbound) iter.next();
        try {
            someClient.getWsOutbound().writeBinaryMessage(ByteBuffer.wrap(arr));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}
public static byte[] BufferedImageToByte(BufferedImage img) {
    byte[] imageInBytes = null;
    try {
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        ImageIO.write(img, "jpg", baos);
        baos.flush();
        imageInBytes = baos.toByteArray();
        baos.close();
    } catch (Exception e) {
        e.printStackTrace();
    }
    return imageInBytes;
}

问题是如何将其打包到画布中。

客户代码：

ws = new WebSocket("ws://"+ location.host + "/carduinowebdroid/websocket");
ws.binaryType = "arraybuffer";
/** stuff **/
ws.onmessage = function(message){
    if (message.data instanceof ArrayBuffer) {
        streamHandleMessage(message);
    }
}
function streamHandleMessage(message) {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
/** what now? **/
}

非常感谢您的帮助！

Answer 1

您真的需要webSocket吗？如果不是：

var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var img = new Image();
img.onload = function(){
    can.width = img.width;
    can.height = img.height;
    ctx.drawImage(img, 0, 0, img.width, img.height);
}
img.src = 'img.jpg';

否则，请查看以下内容：如何从JPG的arrayBuffer表示创建画布imageData数组或者这个http://www.adobe.com/devnet/html5/articles/real-time-data-exchange-in-html5-with-websockets.html