通过 socket.io 发送画布图像

Posted 2023-04-18

【中文标题】通过 socket.io 发送画布图像

【英文标题】：sending a canvas image over socket.io

【发布时间】：2014-09-06 21:26:17

【问题描述】：

我正在尝试将我的 Base64 图像移动到 Buffers 以在 Socket.io 1.0 中提供

我使用FileReader() 加载图像并使用Canvas 元素调整它们的大小。

Canvas 有一个仍然非常不受支持的.toBlob()，任何人都有更兼容的方式将我的画布/图像作为arraybuffer 通过套接字发送，这也将让我在另一侧打开缓冲区并使其成为再次画布/图像。

【问题讨论】：

1.0 版本的 Socket.IO 最初会建立 XHR 或 JSONP 连接，然后如果 websocket 可用，将尝试用 websocket 连接替换该连接。对于不支持 websocket 的客户端来说，这是一种宝贵的灵活性。如果您将数据包仅以二进制形式发送，那么这种灵活性就会丧失。

为什么会失去这种灵活性？我不能只以二进制形式发送图像吗？

正如您所提到的，toBlob 支持并未广泛使用，在旧版浏览器中传输二进制 blob 将失败。 Base64 编码生成的字符串值可以在任何版本的浏览器和 socketIO 中发送——更加灵活。

是的 toBlob 不是一个好方法，这就是我寻找另一种方法的原因；喜欢使用画布图像数据Uint8clampedArray，但我似乎无法将其转换回图像。

【参考方案1】：

您可以使用 canvas.toDataURL 并使用 socketIO 发送 base64 编码的 dataURL。

var theDataURL = canvas.toDataURL();

dataURL 是图像的 .PNG 表示形式。如果您需要较小的文件大小画布，您还可以指定 .JPEG 表示。

// quality ranges from 0.00-1.00
var jpgQuality=0.60;

// get the dataURL in .jpg format
var theDataURL = canvas.toDataURL('image/jpeg',jpgQuality);

.png 和 .jpg dataURL 格式都比从context.getImageData 传输像素数组更轻量。像素数组的权重为 canvas.width*canvas.height*4，而 .png 和 .jpg 格式在编码期间被压缩/优化。

Base64 编码生成一个字符串，因此它与所有浏览器和所有 socketIO 传输的后备版本兼容。

然后您可以像这样在接收端轻松反序列化 dataURL：

var img=new Image();
img.onload=start;
img.src=theBase64URL;
function start()
    document.body.appendChild(img);
    // or
    context.drawImage(img,0,0);

【讨论】：

感谢您的 awnser Mark，很高兴知道像素阵列更大！我很好奇这是否适用于我可能通过 socket.io 发送的任何其他缓冲区/文件类型