javascript - 将文件 base64 发送到 Node.js socket.io 服务器

Question

我正在使用 socket.io 编写一个游戏，在 HTML5 Canvas 上绘图，时间结束后将图像发送到 node.js 服务器。有什么方法可以将 Canvas 转换为图像，将 base64 中的图像发送到 node.js 应用程序，最后将其保存到服务器中？

Answer 1

是的，canvas 元素提供了一个名为toDataURL() 的方法。此方法返回一个 data: URL，其中包含指定格式的图像的 base64 表示形式，默认情况下为 PNG:

var canvas = document.getElementsByTagName('canvas')[0];
var dataUrl = canvas.toDataURL();

假设您使用的是 socket.io，您可以通过发出事件通过套接字发送此数据 URI:

var socket = io.connect('http://localhost');
socket.emit('image', dataUrl);

在 Node 端，您可以在套接字上监听此事件以检索图像:

io.sockets.on('connection', function (socket) {
  socket.on('image', function (dataUrl) {
    console.log(dataUrl);
  });
});

然后您可以根据需要 trim 前缀 data:image/png;base64, 并将内容上传到服务器。

阅读有关 MDN documentation for the canvas element 的更多信息.