在WebSocket中接收Blob并在Canvas中呈现为图像

Question

我正在构建一个简单的WebSocket应用程序,它将当前画布的二进制快照传输给其他侦听器.

使用WebSocket将当前画布快照发送为:

var image = context.getImageData(0, 0, canvas.width, canvas.height);
var buffer = new ArrayBuffer(image.data.length);
var bytes = new Uint8Array(buffer);
for (var i=0; i<bytes.length; i++) {
    bytes[i] = image.data[i];
}
websocket.send(buffer);

尝试将接收端的数据呈现为:

var bytes = new Uint8Array(blob.size);
var image = context.createImageData(canvas.width, canvas.height);
for (var i=0; i<image.length; i++) {
    image[i] = bytes[i];
}
context.drawImage(image, 0, 0);

正确接收blob但仍未呈现图像.

任何的想法 ？

Answer 1

在连接初始化之后立即设置WebSocket的binaryType属性就可以了.这可以这样做:

var wsUri = "ws://localhost:8080/whiteboard/websocket";
var websocket = new WebSocket(wsUri);
websocket.binaryType = "arraybuffer";

这将允许传输文本和二进制数据.

Answer 2

http://www.w3schools.com/tags/canvas_createimagedata.asp?output=print

它应该是 image.data[] 而不是 image[]