通过socket.io发送画布图像

Question

我想我的移动Base64图像，以Buffers提供在Socket.io 1.0

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

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

Answer 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);

}