将 canvas 从客户端（浏览器）传递到服务器（nodejs）

Question

我的浏览器中有一个 canvas，它显示来自我的网络摄像头的提要。 我想做的是将 canvas 数据发送到我的 nodejs 服务器，对其进行操作，然后将其发回。

我可以通过 socket.io 发送 canvas 数据，如下所示：

socket.emit('canvas_data', canvas.toDataURL());

然后在 nodejs 服务器上重建它：

let img = new Image();
img.src = data;  // this is the canvas_data from the first step

const canvas = createCanvas(640,480);
const ctx = canvas.getContext('2d');
ctx.drawImage(img,0,0,640,480);

然而，这似乎真的很浪费，因为我正在使用已经渲染的 canvas，将其转换为 base64，发送它，然后在另一侧重建它。

这样做的重点是在服务器端使用 tfjs：

let converted = tfjs.browser.fromPixels(canvas);

如果我只是从第一步发送 canvas：

socket.emit('canvas_data', canvas);

然后运行 tfjs：

let converted = tfjs.browser.fromPixels(data);

我收到以下错误：

Error: pixels passed to tf.browser.fromPixels() must be either an HTMLVideoElement, HTMLImageElement, HTMLCanvasElement, ImageData in browser, or OffscreenCanvas, ImageData in webworker or {data: Uint32Array, width: number, height: number}, but was object

有没有更有效的方法来实现这一点？

Answer 1

由于浏览器需要，使用toDataURL总是会很慢
在发送之前对所有数据进行编码。

你的第二个例子更好，只是在节点端你需要从你在套接字上收到的Buffer创建张量（这将是最快的方式），不需要使用更高级别的函数，比如fromPixels

查看https://github.com/vladmandic/anime/blob/main/sockets/anime.ts获取客户端代码和https://github.com/vladmandic/anime/blob/main/sockets/server .ts用于服务器端代码

note you also may need to account for channel-depth (does your model work with rgba or rgb ) and/or model specific any pre-processing normalization, that's handled in https://github.com/vladmandic/anime/blob/main /sockets/inference.ts