html - 通过 socket.io 发送 Canvas 图像

Question

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

中可用

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

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

Answer 1

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

var theDataURL = canvas.toDataURL();

dataURL 是图像的 .PNG 表示形式。如果您需要较小文件大小的 Canvas ，您还可以指定 .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);