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

}

通过socket.io发送画布图像

1 个答案: