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中的url模块解析URL信息

    使用node.JS中的url模块解析URL信息

    本文将详细介绍nodeJS中的URL模块的使用方法,利用URL模块解析出URL相关信息
    2020-02-02
  • package.json的版本号更新优化方法

    package.json的版本号更新优化方法

    这篇文章主要为大家介绍了package.json的版本号更新优化方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • Express中使用Swagger的实现示例

    Express中使用Swagger的实现示例

    swagger-express是一个规范和完整的框架实现,本文主要介绍了Express中使用Swagger的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • Node.js处理多个请求的技巧和方法

    Node.js处理多个请求的技巧和方法

    Node.js在处理多个请求方面具有优势,它利用事件驱动和非阻塞式I/O的特性,能够高效地处理并发请求,提供快速响应和良好的可扩展性,这篇文章主要介绍了Node.js如何处理多个请求,需要的朋友可以参考下
    2023-11-11
  • socket.io学习教程之基本应用(二)

    socket.io学习教程之基本应用(二)

    socket.io提供了基于事件的实时双向通讯,下面这篇文章主要给大家介绍了socket.io基本应用的相关资料,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-04-04
  • Koa日志中间件封装开发详解

    Koa日志中间件封装开发详解

    这篇文章主要介绍了Koa日志中间件封装开发详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • NodeJS仿WebApi路由示例

    NodeJS仿WebApi路由示例

    本篇文章主要介绍了NodeJS仿WebApi路由示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 解决修复npm安装全局模块权限的问题

    解决修复npm安装全局模块权限的问题

    今天小编就为大家分享一篇解决修复npm安装全局模块权限的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-05-05
  • 用node开发并发布一个cli工具的方法步骤

    用node开发并发布一个cli工具的方法步骤

    这篇文章主要介绍了用node开发并发布一个cli工具的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 深入理解Node.js 事件循环和回调函数

    深入理解Node.js 事件循环和回调函数

    这篇文章主要介绍了深入理解Node.js 事件循环和回调函数,详细的介绍Node.js 事件循环和Node.js回调函数,需要学习的可以参考一下。
    2016-11-11

最新评论