经过画布。toDataURL（）到ffmpeg。wasm问题

Question

我正在尝试使用FFMPEG设置画布动画到视频的转换。瓦斯姆。其思想是使用canvas生成一组图像。toDataURL（）然后将它们发送到节点服务器以生成视频。我正在从公共目录中提取预上传的图像进行测试，但是当我尝试发送一组（或一个）使用画布创建的图像时，所有这些都可以完美地工作。toDataURL（）我收到以下错误：

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

我试图替换画布。toDataURL（）与画布。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. 在传递到FFMPEG的fetchFile函数之前，需要将其转换为缓冲区值（例如，Buffer.from（image.split（'，'）[1]，'base64'））