我正在尝试使用 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 数据。
最佳答案
对于那些遇到相同问题的人,这是我提出的解决方案:
dataURL
必须是 jpeg
(例如 canvas.toDataURL('image/jpeg')
)。 Buffer.from(image.split(',')[1], 'base64')
函数之前,您需要将其转换为 Buffer 值(例如 fetchFile
。关于javascript - 将 canvas.toDataURL() 传递给 ffmpeg.wasm 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70324936/