node制作一个视频帧长图生成器操作分享

更新时间：2022年08月02日 10:06:02 作者：JYeontu

这篇文章主要介绍了node制作一个视频帧长图生成器操作分享，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下

前言

平时我们在发布视频的时候通常都需要从视频中截取一帧图片作为视频的封面，而现在常见的封面动态预览效果则可以通过视频帧长图来辅助实现，今天就让我们一起使用node来制作一个视频帧长图生成工具。

效果展示

如上图，这是从一个3分钟左右的视频中截取出来的30帧截图合成的长图。

工具实现

获取视频时长

1、引入依赖我们可以使用get-video-duration这个库中的getVideoDurationInSeconds这个方法来获取视频的时长。

const { getVideoDurationInSeconds } = require('get-video-duration');

2、获取时长 getVideoDurationInSeconds是一个异步获取图片时长的方法，入参为需要获取时长的视频路径，返回的结果为视频的时长秒数。

getVideoDurationInSeconds(videoPath);

控制台交互获取相关参数

如上图，我们可以在控制台选择相关的参数，这里需要的参数主要有2个，分别是视频路径和截取图片数量。

这里使用了我自己基于inquirer封装的一个控制台文件选择器插件，具体实现过程和使用方法可以查看我的这一篇文章：node封装一个控制台进度条插件详情

计算截取图片的时间点集合

根据获取到的时长和输入的截图数量，我们可以计算出截取图片的时间点集合。

const changTimeFormat = (seconds)=>{
    seconds = parseInt(seconds);
    let h = Math.floor(seconds / 3600);
    h = h > 9 ? h : '0' + h;
    seconds %= 3600;
    let m = Math.floor(seconds / 60);
    m = m > 9 ? m : '0' + m;
    seconds %= 60;
    seconds = seconds > 9 ? seconds : '0' + seconds;
    return h + ':' + m + ':' + seconds;
};
const countSplitPoint = (duration,cutNums = 30) => {
    cutNums = Math.min(cutNums,parseInt(duration));
    const step = Math.floor(duration / cutNums);
    let start = 0;
    const res = [];
    while(cutNums--){
        res.push(changTimeFormat(start));
        start += step;
    }
    return res;
};

获取每一个时间点的视频帧截图

1、引入依赖

const cp = require('child_process');
const ffmpeg = require('ffmpeg');

引入child_process后，我们可以在node中执行shell脚本语句。
ffmpeg为比较常用的视频处理工具库。

2、功能实现

递归截取视频各个时间点的截图帧。

const execJpg = async(videoPath , saveFilePath, timeArr, index, cb )=>{
    let ind = (index + 1) + '';
    while(ind.length < (timeArr.length + '').length){
        ind = '0' + ind;
    }
    const str = `ffmpeg -ss ${timeArr[index]} -i ${videoPath} -y -f image2 -t 0.001 ${saveFilePath + '\\' + ind}.jpg`;
    await cp.exec(str,async(err)=>{
        if(err) console.log(err);
        const progressBar = new ProgressBar({
            duration: timeArr.length - 1,
            tip:{
                0:'图片截取中……',
                100:'图片截取完成！'
            }
        });
        progressBar.run(index);
        if(index < timeArr.length - 1){
            await execJpg(videoPath , saveFilePath, timeArr, index + 1, cb )
        }else{
            console.log('开始合并图片')
            cb();
        }
    })
};
const getVideoFrame = (config,cb)=>{
    getVideoDurationInSeconds(config.videoPath).then(async(res)=>{
        const timeArr = countSplitPoint(res,config.cutNums);
        await execJpg(config.videoPath , config.saveFilePath, timeArr, 0, cb );
    });
};

图片拼接长图

这里使用了我前面封装的一个图片拼接库来进行处理，该库的实现过程及使用方法可以查看我的这一篇文章：node实现封装一个图片拼接插件

let jInquirer = new JInquirer(config);
jInquirer.prompt().then(async(res)=>{
    res.saveFilePath = '.\\img';
    const ImgConcatClass = new ImgConcat();
    getVideoFrame(res,()=>{
        const p = {
            folderPath:'.\\img',        //资源目录
            targetFolder:'.\\longImg',  //合并后图片存放目录
            direction:'y'               //拼接方向，y为横向，n为纵向
        }
        ImgConcatClass.concatAll(p).then(ans=>{
            console.log(ans);
            return ans;
        });
    });
});

到此这篇关于node制作一个视频帧长图生成器操作分享的文章就介绍到这了,更多相关node制作生成器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Node.js调试技术总结分享
Node.js是一个可以快速构建网络服务及应用的平台。该平台的构建是基于Chrome's JavaScript runtime，也就是说，实际上它是对Google V8引擎（应用于Google Chrome浏览器)进行了封装。今天介绍Node.js调式目前有几种技术，需要的朋友可以参考下。
2017-03-03
node.js实现简单的压缩/解压缩功能示例
这篇文章主要介绍了node.js实现简单的压缩/解压缩功能,结合实例形式分析了node.js实现本地文件与服务器端压缩/解压缩相关操作技巧,需要的朋友可以参考下
2019-11-11
nodeJS删除文件方法示例
这篇文章主要介绍了nodeJS删除文件方法,结合实例形式分析了nodeJS实现文件与目录的获取、遍历与删除相关操作技巧,需要的朋友可以参考下
2016-12-12
NodeJS中利用Promise来封装异步函数
这篇文章主要介绍了NodeJS中利用Promise来封装异步函数，使用统一的链式API来摆脱多重回调的噩梦，非常的实用的小技能，希望小伙伴们能够喜欢
2015-02-02
koa源码中promise的解读
这篇文章主要介绍了koa源码中promise的解读，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
在koa中简单使用Websocket连接的方法示例
本文主要介绍了在koa中简单使用Websocket连接的方法示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
nodejs教程之制作一个简单的文章发布系统
本文主要讲述了使用nodejs制作一个简单的文章发布系统，使用mongodb数据库，时间比较紧，功能做的也比较简单，仅仅是增删改查，外加附近上传，有相同需求的小伙伴可以参考下
2014-11-11
node.js express cors解决跨域的示例代码
在Web开发中,当一个网页的源与另一个网页的源不同时,就发生了跨域,本文就来介绍一下node.js express cors解决跨域的示例代码,具有一定的参考价值,感兴趣的可以了解一下
2023-12-12
NodeJs的优势和适合开发的程序
做页游或webqq这样的应用nodejs有优势，但如果做微博、豆瓣、facebook这样的社交网络，nodejs还有优势吗？另外不知道大家是什么原因选择的nodejs？是因为应用需求还是对javascript这门语言的喜欢？
2016-08-08
我的Node.js学习之路（二）NPM模块管理
npm 是 Node.js 的模块依赖管理工具。作为开发者使用的工具，主要解决开发 Node.js 时会遇到的问题。如同 RubyGems 对于 Ruby 开发者和 Maven 对于 Java 开发者的重要性，npm 对与 Node.js 的开发者和社区的重要性不言而喻。
2014-07-07