将canvas.toDataURL()传递给ffmpeg.wasm问题

Question

我正在尝试设置画布动画转换为视频与FFMPEG.wasm。其想法是使用canvas.toDataURL()生成一组图像，然后将它们发送到节点服务器以生成视频。所有内容都与我从公共目录中提取的用于测试的预先上传的图像完美地工作，但是当我试图发送一堆(或一张)用canvas.toDataURL()创建的图像时，我会得到以下错误：

RuntimeError: abort(Error: ENAMETOOLONG: name too long, open 'data:image/png;base64, ...

我试图用canvas.toDataURL()替换canvas.getContext('2d').getImageData()，但是这也没有帮助。下面是我正在使用的剪切代码：

前线：

async function fetchData() {
  const response = await fetch('/api/record-canvas', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ image: here_goes_the_canvas_data }),
  });
}

后端：

await ffmpeg.load();
ffmpeg.FS('writeFile', `001.png`, await fetchFile(image));
await ffmpeg.run('-loop', '1', '-i', '001.png', '-c:v', 'libx264', '-t', '30', '-pix_fmt', 'yuv420p', 'out.mp4');
await fs.promises.writeFile('out.mp4', ffmpeg.FS('readFile', 'out.mp4'));

上面的代码被简化成一个单一图像的视频，把它循环30秒。同样，对于预先上传的图像，效果很好，但是与画布数据不一样。

Answer 1

对于那些遇到同样问题的人来说，这就是我想出的解决方案：

1. dataURL一定是jpeg。canvas.toDataURL('image/jpeg')).
2. You需要将其转换为缓冲区值(例如，在传递到FFMPEG的fetchFile函数之前的Buffer.from(image.split(',')[1], 'base64')。

)。