在Tomcat Websocket上將緩存的圖像轉換爲HTML 5 Canvas

嘿，我們希望定期通過tomcat websockets將緩衝的圖像發送到畫布，這是一種實時流。在Tomcat Websocket上將緩存的圖像轉換爲HTML 5 Canvas

服務器代碼：

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? **/ 

}

任何幫助，不勝感激！

來源

2013-07-01 xDreamCoding

OFC是'VAR帆布=的document.getElementById（ '畫布'）;你可以嘗試使用： var ctx = canvas.getContext（'2d'）;' – xDreamCoding

' img.src = dataUrl; ctx.drawImage（img，0,0）;' –

你真的需要一個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';

否則看看這個： How can I create a canvas imageData array from an arrayBuffer representation of a JPG 或本 http://www.adobe.com/devnet/html5/articles/real-time-data-exchange-in-html5-with-websockets.html

來源

2013-07-01 14:31:48 surfealokesea

是的，我們不能使用靜態文件。將查看鏈接類型 – xDreamCoding

在Tomcat Websocket上將緩存的圖像轉換爲HTML 5 Canvas

回答

相關問題