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

Question

我正在尝试使用 FFMPEG.wasm 将 Canvas 动画转换为视频。这个想法是用 canvas.toDataURL() 生成一堆图像。然后将它们发送到节点服务器以生成视频。一切都与我从公共(public)目录中提取以进行测试的预上传图像完美配合，但是当我尝试发送使用 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 秒。同样，它适用于预上传的图像，但不适用于 Canvas 数据。

Answer 1

对于那些遇到相同问题的人，这是我提出的解决方案:

dataURL必须是 jpeg (例如 canvas.toDataURL('image/jpeg') )。

在传递给 FFMPEG 的 Buffer.from(image.split(',')[1], 'base64') 函数之前，您需要将其转换为 Buffer 值(例如 fetchFile。