可能是重复问题:
通过websocket接收图像
使用
imageData = context.getImageData(0, 0, width, height);
JSON.stringify(imageData.data);
Websocket message contains invalid character(s). 有没有一种有效的方法来压缩这些数据，以便可以通过websockets发送？根据你想要提高的效率轴（带宽 vs CPU 效率），我会推荐几种方法。
选项1： 可以使用 canvas toDataURL 方法。这将返回一个 canvas 图像数据的 base64 编码图像。它将使用指定的图像格式进行压缩（或使用默认的 PNG 格式），并且会被预编码为 base64 以便通过 WebSocket 发送。
canvas = document.getElementById("mycanvas");
b64png = canvas.toDataURL();
ws.send(b64png);
选项2：如果您可以接受有损压缩，则可以使用toDataURL方法请求图像的base64编码JPEG格式：
canvas = document.getElementById("mycanvas");
b64jpeg = canvas.toDataURL("image/jpeg");
ws.send(b64jpeg);
选项 3：如果您正在使用支持二进制 WebSocket 数据的浏览器（Chrome、Firefox、IE 10），那么您可以直接通过 WebSocket 发送画布数组缓冲区。
canvas = document.getElementById("mycanvas");
ctx = canvas.getContext('2d');
imgdata = ctx.getImageData(0,0, width, height).data; // This is a Uint8ClampedArray
ws.send(imgdata.buffer); // Send the ArrayBuffer from the Uint8ClampedArray
"data:image/png;base64,iVBORw0KGgoAAAA..."
数据URL格式的一个好处是你可以将整个URL复制到浏览器地址栏中，浏览器就会渲染出图片。
查看MDN Canvas页面以获取更多关于toDataURL的信息。
<canvas>数据转换为二进制JPEG blob：
https://github.com/miohtama/Krusovice/blob/master/src/tools/resizer.js#L51
对于非照片类内容，您也可以获取PNG二进制大对象。
二进制大对象始终是原始二进制，不涉及UTF-8或base64编码。
WebSocket.send()支持以二进制大对象作为输入：
https://developer.mozilla.org/en/WebSockets/WebSockets_reference/WebSocket
HTTP Blob发送：
https://developer.mozilla.org/en/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data
您在不同浏览器中的里程可能会有所不同。
既然你要求更高效的方法，我不同意关闭。我们能做的最少是帮你想出更高效的方法。
这取决于你在做什么。客户端能否多做些工作？
你真的需要发送全部画布像素数据吗？能否只发送已更改的像素？（或者几乎所有像素都更改了吗？）
来回只发送更改内容将使问题转化为计算问题，而非大量数据在网络上传输的问题。
根据你的应用程序，你能否跟踪已更改的区域？如果画布上有2-3个小矩形发生了变化，那么发送的内容应该比整个画布要小得多。
与任何效率问题一样，值得问一下自己是否首先在做正确的事情。你真的需要通过网络传输大量像素数据吗？通常，使用画布，通过发送更改视图的命令来重新创建场景相对于发送位图本身要容易得多。WebSockets非常适合此类功能。这可能是许多绘图应用程序和游戏的良好解决方案，但这确实取决于你要完成什么任务。
我发现了一种显著减少通过网络发送的数据量的方法。
getImageData 方法返回一个对象，其中 data 属性本身就是一个对象，其键为像素的索引，值为单个红色、绿色、蓝色或 alpha 值。由于键使对象变得非常大，特别是因为 300x300 画布对象将具有 300x300x4 = 360,000 个对象键/值对。
因此，通过仅提取颜色的值并将它们推入数组中：
function extractValues(obj){
var array = [];
for (var key in obj){
array.push(obj[key]);
}
return array;
}
我成功地将数据减少了50%以上，这导致了显著的性能提升。