js如何将视频和图片合成mp4视频文件？

可以试试canvas2video，他可以将canvas中的视频动画图片声音等转换成视频文件，支持webm、MP4格式导出。

github地址https://github.com/welefen/canvas2video

FFCreator 是一个基于Node.js的轻量级、灵活的短视频处理库。您只需要添加一些图片、音乐或视频片段，就可以使用它快速创建一个非常精彩的视频相册。 如今，短视频是一种越来越流行的媒体传播形式。像微视和抖音一样充满了各种精彩的短视频。那么如何让用户直观地在网络上轻松快速地创建视频剪辑。或者基于图片文本内容，动态批量生成短视频是一个技术问题。 FFCreator是一种轻量级且灵活的解决方案，需要很少的依赖项和低机器配置即可快速开始工作。并且模拟了 90% 的动画效果animate.css。您可以轻松地将网页端的动画效果转换为视频。 使用FFCreator和vue.js，您可以开发一个通过拖放构建视频的Web项目，就像h5构建工具一样，github地址：https://github.com/tnfe/shida。 当您需要处理大量视频片段并需要更快的合成速度时，FFCreatorLite是一个更好的选择，github地址：https://github.com/drawcall/FFCreatorLite

https://github.com/tnfe/FFCreator

安装 npm 包

npm install ffcreator --save

注意：要运行上述命令，必须安装 Node.js 和 npm。

示例代码：

const { FFScene, FFText, FFVideo, FFAlbum, FFImage, FFCreator } = require("ffcreator");

// Create FFCreator instance
const creator = new FFCreator({
cacheDir,
outputDir,
width: 800,
height: 450
});

// Create scene
const scene = new FFScene();
scene.setBgColor("#ffcc22");
scene.setDuration(6);
scene.setTransition("GridFlip", 2);
creator.addChild(scene);

// Create Image and add animation effect
const image = new FFImage({ path: path.join(__dirname, "../assets/01.jpg") });
image.addEffect("moveInUp", 1, 1);
image.addEffect("fadeOutDown", 1, 4);
scene.addChild(image);

// Create Text
const text = new FFText({ text: "hello 你好", x: 400, y: 300 });
text.setColor("#ffffff");
text.setBackgroundColor("#000000");
text.addEffect("fadeIn", 1, 1);
scene.addChild(text);

// Create a multi-photo Album
const album = new FFAlbum({
list: [img1, img2, img3, img4], // Picture collection for album
x: 250,
y: 300,
width: 500,
height: 300,
});
album.setTransition('zoomIn'); // Set album switching animation
album.setDuration(2.5); // Set the stay time of a single sheet
album.setTransTime(1.5); // Set the duration of a single animation
scene.addChild(album);

// Create Video
const video = new FFVideo({ path, x: 300, y: 50, width: 300, height: 200 });
video.addEffect("zoomIn", 1, 0);
scene.addChild(video);

creator.output(path.join(__dirname, "../output/example.mp4"));
creator.start(); // Start processing
creator.closeLog(); // Close log (including perf)

creator.on('start', () => {
console.log(`FFCreator start`);
});
creator.on('error', e => {
console.log(`FFCreator error: ${JSON.stringify(e)}`);
});
creator.on('progress', e => {
console.log(colors.yellow(`FFCreator progress: ${e.state} ${(e.percent * 100) >> 0}%`));
});
creator.on('complete', e => {
console.log(colors.magenta(`FFCreator completed: \n USEAGE: ${e.useage} \n PATH: ${e.output} `));
});