嘿，我们想通过 tomcat websocket 定期将缓冲图像发送到 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;
}
问题是如何将其打包到 Canvas 中。
客户端代码:
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? **/
}
非常感谢任何帮助!
最佳答案
你真的需要 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
关于java - 通过 Tomcat Websocket 将图像缓冲为 JPG 到 HTML 5 Canvas，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17406441/