使用nodejs+ffmpeg后台将lottieJSON文件转换成mp4文件

最新推荐文章于 2024-08-19 10:53:23 发布

纯白mi

最新推荐文章于 2024-08-19 10:53:23 发布

阅读量902

点赞数

文章标签： ffmpeg node.js

本文链接：https://blog.csdn.net/u010736165/article/details/133740386

版权

首先简单的介绍一下Lottie：
Lottie 是一种开源技术，用于在移动应用程序和 Web 应用程序中展示高质量的矢量动画。它由 Airbnb 创建并维护，旨在简化矢量动画的创建和展示。Lottie 提供了一种跨平台的方法，可以在 iOS、Android 和 Web 上渲染复杂的矢量动画，而无需额外的插件或工具。

以下是关于 Lottie 的一些关键特点和信息：
JSON 文件格式： Lottie 动画使用 JSON 文件格式来存储动画数据。这个 JSON 文件包含了动画的属性、关键帧、图层和路径等信息。设计师可以使用支持 Lottie 的设计工具（如 Adobe After Effects）创建这些文件。
高质量的矢量动画： Lottie 动画是矢量的，因此它们可以以任何尺寸和分辨率呈现而不失真。这使得它们非常适合在不同设备和屏幕上展示。
跨平台兼容性： Lottie 提供了针对 iOS、Android 和 Web 的运行时库。这意味着您可以在不同的移动平台和 Web 上使用相同的动画文件，实现一致的用户体验。
易于集成： Lottie 运行时库允许开发人员将动画轻松集成到其应用程序中。无论是原生应用程序还是 Web 应用程序，都可以使用适当的库加载和播放 Lottie 动画。
开源项目： Lottie 是一个开源项目，它的源代码托管在 GitHub 上。这使得开发人员可以自由使用、修改和分享 Lottie 技术，同时社区也不断增加了各种 Lottie 动画资源。

由于公司业务需要，前端生成lottieJSON文件，后端将JSON转成MP4格式的视频文件。
这里主要使用的是nodejs和ffmpeg技术。（是个人预研结果，不一定是最优解决方案，欢迎大家一起讨论更优的解决方案）
主要分为两个步骤：
第一个步骤使用nodejs虚拟dom节点渲染lottieJson文件并逐帧播放，然后使用canvas将lottieJson渲染的每一帧画面生成图片。
第二个步骤使用ffmpeg将帧图生成一个视频。
下面是代码逻辑：
第一步：

const lottie = require('lottie-nodejs');
const { JSDOM } = require('jsdom');//用于创建虚拟节点
const fs = require('fs'); //用于生成文件

//准备好Lottie的JSON文件
const animationData = require('./test4.json'); // 导入 Lottie 动画的 JSON 数据
const dom = new JSDOM('<html><body></body></html>');//创建虚拟dom节点
const d = dom.window.document.createElement('canvas'); //创建一个canvas节点
d.width = animationData.w; //从JSON中获取原始的宽
d.height = animationData.h; //从JSON中获取原始的高

// 创建一个 Lottie 实例
const animation = lottie.loadAnimation({
    animationData: animationData,
    renderer: 'canvas',
    loop: false,
    autoplay: false,
    container: d
});

// 设置输出文件夹
const outputFolder = './output_frames'; // 指定输出的帧文件夹
if (!fs.existsSync(outputFolder)) {
    fs.mkdirSync(outputFolder);
}

// 逐帧渲染并保存图像
for (let frame = 0; frame < animation.totalFrames; frame++) {
    animation.goToAndStop(frame, true);
    // 渲染到 Canvas
    animation.renderer.renderFrame(frame);

    // 获取 Canvas 的 base64 数据
    const dataURL = d.toDataURL('image/png');

    // 去除数据头部
    const base64Data = dataURL.replace(/^data:image\/\w+;base64,/, '');

    // 创建 Buffer
    const buffer = Buffer.from(base64Data, 'base64');

    let frameFileName = `${outputFolder}/frame_${frame}.png`;
    // 保存 Buffer 到文件
    fs.writeFileSync(frameFileName, buffer);
}

第二步，使用FFmpeg生成视频：

ffmpeg -framerate 30 -i F:/gitlab/node-lottie/output_frames/frame_%d.png -c:v libx264 -r 30 -pix_fmt yuv420p output.mp4

这里ffmpeg是简单的将图片生成视频，后续可以参考ffmpeg命令调整，比如可以增加音频功能等。