html - 通过 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 数据 URL 格式都比从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);

}