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

首先简单的介绍一下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命令调整,比如可以增加音频功能等。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值