经过画布。toDataURL（）到ffmpeg。wasm问题
我正在尝试使用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秒的视频。同样，使用预上传的图像非常有效，但不使用画布数据。
共有1个答案
对于那些遇到相同问题的人，我提出了以下解决方案：
dataURL必须是jpeg（例如canvas.toDataURL（'image/jpeg'））- 在传递到FFMPEG的
fetchFile函数之前，需要将其转换为缓冲区值（例如，Buffer.from（image.split（'，'）[1]，'base64'））
-
问题内容： 我正在使用glfx.js编辑我的图像，但是当我尝试使用函数获取该图像的数据时，我得到了一个空白图像（宽度与原始图像相同）。 奇怪的是，在Chrome中，脚本可以完美运行。 我要提及的是，使用onload事件加载了图像： 另外，我的图片路径在同一域中； 问题（在Firefox中）是当我按下“保存”按钮时。Chrome返回预期结果，但Firefox返回以下结果： 是什么导致此结果，如何解决
-
我保存画布有问题。我想那是因为我的画布太大了。我在这里寻求帮助： 画布上的元素会随着jsfiddle消失 帆布用于大型画布的toDataURL（） ...但是没有成功。 我的问题是下一个： 例如，我有一个画布，它的尺寸是1123x1965像素，我需要将其调整到29.7x52厘米，并以300dpi的速度放置。 我的理由如下： 编辑完模板后，将其转换为完整大小，然后将png图像保存为实际大小（以像素为
-
我有一个RelativeLayout，其中两个LinearLayout和一个TextView（三个都是孩子）共享同一个空间，这意味着在任何给定点上，只有一个视图可见，而其他两个视图消失。在应用程序启动时，TextView是可见视图。我有一个按钮，可以启动动画，使文本视图淡出，线性布局淡入。另一个线性布局还有一个按钮。 逻辑如下： 按下按钮- 只要上面的交互使用相同的按钮（对于相同的线性布局），这就
-
对于antvG6绘制的图来说，我设置了mode格式是drag-canvas，但是当我在控制台将屏幕尺寸调整为ipad，拖拽画布就失效了。如果只是调整页面宽度为ipad的宽度，拖拽仍可以生效。请问该如何解决？
-
我正在创建一个Html5绘图应用程序，我已经解决了所有的功能，但我现在遇到了问题，因为我现在在设计阶段，并试图使它看起来很好。我想居中我的画板，但一旦我实现css到div容器，容器将移动，但它将推动画板/画布出容器，它将离开页面远离我的绘图光标。有没有一种方法让所有的东西都能正确地移动在一起？谢谢你...我提前向你道歉这里有很多代码
-
为什么toDataURL()用不了？报错toDataURL is not a function.